JQuery - 允許選擇特定的 2 個復選框

Question

我只想選擇 1 個復選框 - 除非它的復選框 3 和 4 - 然后我想允許選擇這兩個復選框。 這是我唯一一次希望允許 2 個復選框。

我有一個只允許 1 個復選框的工作示例。 看 jsfiddle ... https://jsfiddle.net/rbla/s1setkfe/3/

我需要允許選擇 #3 和 #4

 $(function() { $('#submit').click(function() { checked = $("input[type=checkbox]:checked").length; if (!checked) { alert("You must check at least one reason."); return false; } }); }); // No more than 1 checkbox allowed var limit = 1; $('input.sing-chbx').on('change', function(evt) { if ($("input[name='choice[]']:checked").length > limit) { this.checked = false; } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="" name="formname" method="post" autocomplete="off" id="update"> <div class="group" style="margin:0.5em 0;"> <div> <div id="one"> <input type="checkbox" class="sing-chbx" id="choice" name="choice[]" value="01"> <label>One</label><br/> </div> <div id="two"> <input type="checkbox" class="sing-chbx" name="choice[]" value="02"> <label>Two</label><br/> </div> <div id="three"> <input type="checkbox" class="sing-chbx" name="choice[]" value="03"> <label>Three</label><br/> </div> <div id="four"> <input type="checkbox" class="sing-chbx" name="choice[]" value="04"> <label>Four</label><br/> </div> <div id="five"> <input type="checkbox" class="sing-chbx" name="choice[]" value="05"> <label>Five</label><br/> </div> </div> </div> <input type="submit" id="submit" value="Confirm Submission"> </form>

Answer 1

我為您創建了一個小提琴來演示我的解決方案。

我改變了你處理這個問題的方式，通過實際禁用其他復選框來讓用戶更直觀地了解正在發生的事情。

我向所有只允許一個選擇的復選框添加了新類，並在允許兩個選擇的復選框中添加了一個單獨的類。

之后，您只需要檢查單擊復選框的類，並根據它是select-one還是select-two復選框來禁用其他類：

var canOnlySelectOne = $(this).hasClass("select-one");

if (canOnlySelectOne) {
    $(".sing-chbx").not(this).attr("disabled", this.checked);
} else if ($(this).hasClass("select-two")) {
    if ($(".select-two:checked").length > 0) {
       $(".select-one").attr("disabled", true);
} else {
 $(".select-one").attr("disabled", this.checked);
}
}

我們只是根據是否選中了點擊的復選框（ this ）來啟用/禁用其他復選框。 如果復選框有一個select-two一的類，那么我們檢查是否有任何select-two復選框被選中，並采取相應的行動。

Answer 2

1. 而不是阻止用戶檢查 - 只需取消選中上一個選擇
2. 您有 3 種情況：點擊了 03，點擊了 04，點擊了其他東西

這是更新后的代碼：

 $(function() { $('#submit').click(function() { checked = $("input[type=checkbox]:checked").length; if (!checked) { alert("You must check at least one reason."); return false; } }); }); // No more than 1 checkbox allowed except 3 & 4 $('input.sing-chbx').on('change', function(evt) { var me = $(this).val(); $('input.sing-chbx').each(function(ix){ var el = $(this); if(el.val()!= me) { if(me == "03") { // case 1: me == '03' - disable all but '04' if( el.val() != "04") { el.prop('checked', false); } } else if(me == "04") { // case 2: me == '04' - disable all but '03' if(el.val() != "03") { el.prop('checked', false); } } else { // otherwise disable all el.prop('checked', false); } } }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="" name="formname" method="post" autocomplete="off" id="update"> <div class="group" style="margin:0.5em 0;"> <div> <div id="one"> <input type="checkbox" class="sing-chbx" id="choice" name="choice[]" value="01"> <label>One</label><br/> </div> <div id="two"> <input type="checkbox" class="sing-chbx" name="choice[]" value="02"> <label>Two</label><br/> </div> <div id="three"> <input type="checkbox" class="sing-chbx" name="choice[]" value="03"> <label>Three</label><br/> </div> <div id="four"> <input type="checkbox" class="sing-chbx" name="choice[]" value="04"> <label>Four</label><br/> </div> <div id="five"> <input type="checkbox" class="sing-chbx" name="choice[]" value="05"> <label>Five</label><br/> </div> </div> </div> <input type="submit" id="submit" value="Confirm Submission"> </form>