jQuery的複選框以限制dinamis

Question

我有以下的html：

<input type="checkbox" id="perlengkapans" data-stok="[1]" onchange="ambil($(this))"> name item 1 
    <input type="checkbox" id="perlengkapans" data-stok="[4]" onchange="ambil($(this))"> name item 2 
    <input type="checkbox" id="perlengkapans" data-stok="[0]" onchange="ambil($(this))"> name item 3 

的jQuery：

function ambil(x){ 
    var limit = x.data('stok') 
    var cnt = $('#perlengkapans:checked').length 
    if (cnt>limit){ 
     x.prop('checked', '') 
     alert('you can maximum '+ limit) 
    } 
} 

我要顯示一個消息"you can maximum <variable_limit_value>"，如果股價已經達到了極限。
但它沒有顯示消息。請幫忙。

Answer 1

改變輸入屬性 - onchange="ambil((this))"

而且你的函數 -

function ambil(x) { 
     limit = $(x).data('stok') 
     cnt = $('#perlengkapans:checked').length 
     if (cnt > parseInt(limit,10)) { 
      $(x).prop('checked', '') 
      alert('you can maximum ' + limit) 
     } 
    } 

Answer 2

不知道，你與你的代碼實現。

但是，這取決於你的代碼，以下是更正：

1）在HTML DOM，應該有一個元素只有一個ID。總之id是一個獨特的財產。在你的情況下，有三個元素相同的id。需要解決它。

2）將id屬性更改爲name並訪問相同。可以有多個具有相同名稱的元素。

更正代碼：

所有的

<input type="checkbox" name="perlengkapans" data-stok="[1]" onchange="ambil($(this))"> name item 1 
    <input type="checkbox" name="perlengkapans" data-stok="[4]" onchange="ambil($(this))"> name item 2 
    <input type="checkbox" name="perlengkapans" data-stok="[0]" onchange="ambil($(this))"> name item 3 
<script> 
    function ambil(x){ 
    var limit = x.data('stok') 
    var cnt = $('[name=perlengkapans]:checked').length; // observe what is changed here. 
    if (cnt>limit){ 
    x.prop('checked', '') 
    alert('you can maximum '+ limit)}} 
</script> 

Answer 3

首先，ID應該不能重複，邏輯似乎是錯誤的。嘗試下面的內容。

<input type="checkbox" id="perlengkapans1" name="perlengkapans" data-stok="1" value="name item 1" /> 
    <input type="checkbox" id="perlengkapans2" name="perlengkapans" data-stok="4" value="name item 2" /> 
    <input type="checkbox" id="perlengkapans3" name="perlengkapans" data-stok="0" value="name item 3" /> 

在js文件中添加此

$("input[name='perlengkapans']").on("change", function(){ 
    if($("input[name='perlengkapans']":checked").length > $(this).data('stok')) { 
      // Display Alert 
     }    
    }); 
});