只允許每個表格檢查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

由於您的形式是動態的，也許這將是更好的利用。

我確實創建了一個jsfiddle並將其發佈在評論中，但這僅適用於這兩種形式。也許你想添加更多？ JSFiddle Demo

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 2

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

$('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 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>