Select 組中只有一個復選框，但如果是某些復選框，則可以選擇 select 多個復選框

Question

<input type="checkbox" name="checkboxes[]" value="1">
<input type="checkbox" name="checkboxes[]" value="2">
<input type="checkbox" name="checkboxes[]" value="3">
<input type="checkbox" name="checkboxes[]" value="4">
<input type="checkbox" name="checkboxes[]" value="5">
<input type="checkbox" name="checkboxes[]" value="6">

例如，我希望這個組只有一個選項，但我也希望用戶能夠同時使用 select 值 4 和 5。

有沒有辦法在沒有復雜邏輯的情況下做到這一點？

這是我的腳本

$(function () {

    $('input:checkbox').on('click', function () {

        var checkboxArray = $('input:checkbox'); // CheckBoxList Items

        var current = $(this); // Get Selected Chec kbox 

        // Uncheck every checkBox that don't match the unique multi selection combo

        if (current.val() != "4" && current.val() != "5") {

            // Loop through checkboxArray and uncheck every item that does not meet the condition
            $(checkboxArray).each(function (i) {
                $(this).prop("checked", false);
            });

            // Check the selected item again
            $(current).prop("checked", true);
        } else {

            // Get the current checkbox value 
            var chk = $(current).val();

            // If the checkbox that matches the unique combo selection was click uncheck all invalid checkboxes that don't match
            if (chk == "4" || chk == "5") {

                // loop through the checkboxlist again
                $(checkboxArray).each(function () {
                    // Get the looped item name
                    var ck = $(this).val().text();
                    // if checkbox does not belong to the unique combo selection, uncheck it
                    if (ck != "4" && ck != "5") {
                        $(this).prop("checked", false);
                    }
                });
            }
        }
    });
});

Answer 1

 var aCheckboxes = document.querySelectorAll("input[name='checkboxes[]']"); var aGroups = [ [1, 2, 3, 6], [4, 5] ]; for (var i = 0; i < aCheckboxes.length; i++) { aCheckboxes[i].addEventListener("change", function(e) { checkGroups(e.target.value); //...call checkGroups... }); } function enableCheckboxes() { for (var i = 0; i < aCheckboxes.length; i++) { aCheckboxes[i].disabled = false; } } function checkGroups(sCheckboxVal) { var isOneChecked = false; for (var x = 0; x < aCheckboxes.length; x++) { //Loop through all checkboxes if (aCheckboxes[x].checked === true) { //is checkbox is checked isOneChecked = true; } } enableCheckboxes(); //Enable all checkboxes if (isOneChecked === true) { //Is at least one checkbox is checked check groups aGroups.forEach(function(aGroup) { //Loop throgh your groups if (aGroup.indexOf(parseInt(sCheckboxVal)) === -1) { //Is checkbox not in group... for (x = 0; x < aGroup.length; x++) { //...loop thorugh all checkboxes... document.querySelectorAll("input[value='" + aGroup[x] + "']")[0].disabled = true; //...and disable checkbox } } }); } }

 <input type="checkbox" name="checkboxes[]" value="1"> <input type="checkbox" name="checkboxes[]" value="2"> <input type="checkbox" name="checkboxes[]" value="3"> <input type="checkbox" name="checkboxes[]" value="4"> <input type="checkbox" name="checkboxes[]" value="5"> <input type="checkbox" name="checkboxes[]" value="6">