每個表格僅選中2個復選框

Question

我在一頁中有多個具有相同輸入名稱的表格。 表單之間的唯一區別是包含它們的表單。

對於我表單上的復選框組，我只希望允許選中三個復選框中的兩個，但是我不希望一種表單中的復選框影響另一種復選框。

我現在有一個jsFiddle。

我現在進行了設置，可以在三個復選框中僅選中兩個復選框，但這是針對整個文檔的，而不是特定於表格的。

我頁面中的表單是用循環創建的，表單的ID是它們之間的唯一區別。

任何人都可以幫忙嗎？

https://jsfiddle.net/likwidmonster/3zbs61q5/

 $('input[type=checkbox][name=group]').on('change', function(e) { if ($('input[type=checkbox][name=group]:checked').length < 2) { $('input[type=checkbox][name=group]:not(:checked)').prop('disabled', false); } if ($('input[type=checkbox][name=group]:checked').length == 2) { $('input[type=checkbox][name=group]:not(:checked)').prop('disabled', 'disabled'); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <h4> Form 1 </h4> <form id="form_1"> <input type="checkbox" name="group" value="1"> <input type="checkbox" name="group" value="2"> <input type="checkbox" name="group" value="3"> </form> </div> <div> <h4> Form 2 </h4> <form id="form_2"> <input type="checkbox" name="group" value="1"> <input type="checkbox" name="group" value="2"> <input type="checkbox" name="group" value="3"> </form> </div> 

Answer 1

這是一個可行的解決方案。 希望能幫助到你！

 $('input[type=checkbox][name=group]').on('change', function(e) { if ($('#form_1 input[type=checkbox][name=group]:checked').length === 2) { $('#form_1 input[type=checkbox][name=group]:not(:checked)').prop('disabled', 'disabled'); }else{ $('#form_1 input[type=checkbox][name=group]:not(:checked)').prop('disabled', false); } if ($('#form_2 input[type=checkbox][name=group]:checked').length === 2) { $('#form_2 input[type=checkbox][name=group]:not(:checked)').prop('disabled', 'disabled'); }else{ $('#form_2 input[type=checkbox][name=group]:not(:checked)').prop('disabled', false); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div> <h4> Form 1 </h4> <form id="form_1"> <input type="checkbox" name="group" value="1"> <input type="checkbox" name="group" value="2"> <input type="checkbox" name="group" value="3"> </form> </div> <div> <h4> Form 2 </h4> <form id="form_2"> <input type="checkbox" name="group" value="1"> <input type="checkbox" name="group" value="2"> <input type="checkbox" name="group" value="3"> </form> </div> 

Answer 2

由於您的表單是動態的，因此可能會更好用。

我確實創建了一個jsfiddle並將其發布在注釋中，但這僅對這兩種形式有用。 也許您想添加更多？ JSFiddle演示

this.parentNode.id;

this用於定位觸發函數的元素， .parentNode用於獲取表單元素， .id用於獲取表單的ID，因此您可以定位該特定表單，這意味着您僅需要一個if條件來運行該表單所有形式！

 $('form input[type=checkbox][name=group]').on('change', function(e) { var MyForm=this.parentNode.id; if ($('form[id='+MyForm+'] input[type=checkbox][name=group]:checked').length == 2) { $('form[id='+MyForm+'] input[type=checkbox][name=group]:not(:checked)').prop('disabled', 'disabled'); }else{ $('form[id='+MyForm+'] input[type=checkbox][name=group]:not(:checked)').prop('disabled', false); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <h4> Form 1 </h4> <form id="form_1"> <input type="checkbox" name="group" value="1"> <input type="checkbox" name="group" value="2"> <input type="checkbox" name="group" value="3"> </form> </div> <div> <h4> Form 2 </h4> <form id="form_2"> <input type="checkbox" name="group" value="1"> <input type="checkbox" name="group" value="2"> <input type="checkbox" name="group" value="3"> </form> </div> 

如果您有任何疑問，請在下面發表評論，我們會盡快與您聯系。

希望對您有所幫助。 編碼愉快！

Answer 3

使用函數初始化每個組的事件處理程序。 也使用其他組名。

https://jsfiddle.net/3zbs61q5/3/

 function setupCheckboxGroup(grpName){ $('input[type=checkbox][name='+grpName+']').on('change', function(e) { if ($('input[type=checkbox][name='+grpName+']:checked').length < 2) { $('input[type=checkbox][name='+grpName+']:not(:checked)').prop('disabled', false); } if ($('input[type=checkbox][name='+grpName+']:checked').length == 2) { $('input[type=checkbox][name='+grpName+']:not(:checked)').prop('disabled', 'disabled'); } }); } setupCheckboxGroup('group'); setupCheckboxGroup('group2'); 

 <div> <h4> Form 1 </h4> <form id="form_1"> <input type="checkbox" name="group" value="1"> <input type="checkbox" name="group" value="2"> <input type="checkbox" name="group" value="3"> </form> </div> <div> <h4> Form 2 </h4> <form id="form_2"> <input type="checkbox" name="group2" value="1"> <input type="checkbox" name="group2" value="2"> <input type="checkbox" name="group2" value="3"> </form> </div>