根据＆＃34;数据属性＆＃34;禁用一组复选框。和残疾人士

Question

我有以下一组复选框：

<input class="lvl" type="checkbox" data-groupid="1" data-multichoice="1" checked />
<input class="lvl" type="checkbox" data-groupid="1" data-multichoice="1" />
<input class="lvl" type="checkbox" data-groupid="1" data-multichoice="1" />
<br />
<input class="lvl" type="checkbox" data-groupid="2" data-multichoice="0" />
<input class="lvl" type="checkbox" data-groupid="2" data-multichoice="0" />
<input class="lvl" type="checkbox" data-groupid="2" data-multichoice="0" checked />
<input class="lvl" type="checkbox" data-groupid="2" data-multichoice="0" />
<br />
<input class="lvl" type="checkbox" data-groupid="3" data-multichoice="1" />
<input class="lvl" type="checkbox" data-groupid="3" data-multichoice="1" checked />
<input class="lvl" type="checkbox" data-groupid="3" data-multichoice="1" />
<input class="lvl" type="checkbox" data-groupid="3" data-multichoice="1" />
<br />
<input class="lvl" type="checkbox" data-groupid="4" data-multichoice="0" />
<input class="lvl" type="checkbox" data-groupid="4" data-multichoice="0" />
<input class="lvl" type="checkbox" data-groupid="4" data-multichoice="0" />
<input class="lvl" type="checkbox" data-groupid="4" data-multichoice="0" />

我需要停用所有class="lvl"和data-multichoice="0" IF 的复选框。此组中已经选中了一个复选框。 因此，将上面的场景转换为：

<input class="lvl" type="checkbox" data-groupid="1" data-multichoice="1" checked />
<input class="lvl" type="checkbox" data-groupid="1" data-multichoice="1" />
<input class="lvl" type="checkbox" data-groupid="1" data-multichoice="1" />
<br />
<input class="lvl" type="checkbox" data-groupid="2" data-multichoice="0" disabled />
<input class="lvl" type="checkbox" data-groupid="2" data-multichoice="0" disabled />
<input class="lvl" type="checkbox" data-groupid="2" data-multichoice="0" checked />
<input class="lvl" type="checkbox" data-groupid="2" data-multichoice="0" disabled />
<br />

<input class="lvl" type="checkbox" data-groupid="3" data-multichoice="1" />
<input class="lvl" type="checkbox" data-groupid="3" data-multichoice="1" checked />
<input class="lvl" type="checkbox" data-groupid="3" data-multichoice="1" />
<input class="lvl" type="checkbox" data-groupid="3" data-multichoice="1" />
<br />
<input class="lvl" type="checkbox" data-groupid="4" data-multichoice="0" />
<input class="lvl" type="checkbox" data-groupid="4" data-multichoice="0" />
<input class="lvl" type="checkbox" data-groupid="4" data-multichoice="0" />
<input class="lvl" type="checkbox" data-groupid="4" data-multichoice="0" />

有什么想法吗？

Answer 1

试试这个

＆＃13;

＆＃13;

$('.lvl[data-multichoice="0"]').not(':checked').prop('disabled', true);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input class="lvl" type="checkbox" data-groupid="1" data-multichoice="1" checked />
<input class="lvl" type="checkbox" data-groupid="1" data-multichoice="1" />
<input class="lvl" type="checkbox" data-groupid="1" data-multichoice="1" />
<br />
<input class="lvl" type="checkbox" data-groupid="2" data-multichoice="0" />
<input class="lvl" type="checkbox" data-groupid="2" data-multichoice="0" />
<input class="lvl" type="checkbox" data-groupid="2" data-multichoice="0" checked />
<input class="lvl" type="checkbox" data-groupid="2" data-multichoice="0" />
<br />
<input class="lvl" type="checkbox" data-groupid="3" data-multichoice="1" />
<input class="lvl" type="checkbox" data-groupid="3" data-multichoice="1" checked />
<input class="lvl" type="checkbox" data-groupid="3" data-multichoice="1" />
<input class="lvl" type="checkbox" data-groupid="3" data-multichoice="1" />

＆＃13;

＆＃13;

＆＃13;

Answer 2

上述答案是正确的，这只是在未选中所有输入时重新启用此组的所有输入的另一种方法。

$(document).ready(function(){
    var $inputs = $(".lvl");
    function checkInput(){
        if( $('.lvl[data-groupid="2"]:checked').length > 0) {
            $('.lvl[data-groupid="2"]').not(':checked').prop('disabled', true);
        } else {
            $('.lvl[data-groupid="2"]').not(':checked').prop('disabled', false);
        }
    }

    // watch input change event
    $inputs.change(function() {
        checkInput();
    });

    // check inputs on DOM ready
    checkInput();
});

修改

根据建议，如果您希望每个组选择一个，则可能需要使用无线电。 这将使您的Radios像Checkbox一样，并使用属性

切换其状态

  

data-multichoice='0'如果有一个已经选中的复选框   在这个小组中

    var $inputs = $(".lvl");
    $inputs.click(function() {

        var previousValue = $(this).attr('previousValue');

        // Make radios act like checkbox for same group
        var inputGroup = $("input[name="+ $(this).attr('name') +"]:radio");

        // Toggle Disable attr for radios of same group + data-multichoice="0"
        var targerGroup = $("input[name="+ $(this).attr('name') +"][data-multichoice='0']:radio");

        if (previousValue == 'checked')
        {

            $(this).removeAttr('checked');
            $(this).attr('previousValue', false);
            targerGroup.not(':checked').prop('disabled', false);

        }
        else
        {
            inputGroup.attr('previousValue', false);
            $(this).attr('previousValue', 'checked');
            targerGroup.not(':checked').prop('disabled', true);
        }

    });

 <input class="lvl" type="radio" name="group1"  data-groupid="1" data-multichoice="1" checked />
 <input class="lvl" type="radio" name="group1"  data-groupid="1" data-multichoice="1" />
 <input class="lvl" type="radio" name="group1"  data-groupid="1" data-multichoice="1" />
 <input class="lvl" type="radio" name="group2"  data-groupid="2" data-multichoice="0" disabled />
 <input class="lvl" type="radio" name="group2"  data-groupid="2" data-multichoice="0" disabled />
 <input class="lvl" type="radio" name="group2"  data-groupid="2" data-multichoice="0" checked />
 <input class="lvl" type="radio" name="group2"  data-groupid="2" data-multichoice="0" disabled />
 <input class="lvl" type="radio" name="group3"  data-groupid="3" data-multichoice="1" />
 <input class="lvl" type="radio" name="group3"  data-groupid="3" data-multichoice="1" checked />
 <input class="lvl" type="radio" name="group3"  data-groupid="3" data-multichoice="1" />
 <input class="lvl" type="radio" name="group3"  data-groupid="3" data-multichoice="1" />
 <input class="lvl" type="radio" name="group4"  data-groupid="4" data-multichoice="0" />
 <input class="lvl" type="radio" name="group4"  data-groupid="4" data-multichoice="0" />
 <input class="lvl" type="radio" name="group4"  data-groupid="4" data-multichoice="0" />
 <input class="lvl" type="radio" name="group4"  data-groupid="4" data-multichoice="0" />