Question

如果我检查了列表0，我将检查兄弟姐妹中的任何一个列表1或列表2。我试过至少检查一下列表中的一个。

    <div><input name="list[]" id="list0" type="checkbox"  value="newsletter0" >zero</div>
    <div><input name="list[]" id="list1" type="checkbox"  value="newsletter1" >one</div>
    <div><input name="list[]" id="list2" type="checkbox"  value="newsletter2" >two</div>

Answer 1

希望我能正确理解你的问题：如果用户检查零，你希望他们能够检查一个或两个，但不能同时检查一个和两个？

见example。希望它能满足您的需求，或者至少向您展示如何实现您的目标：

http://jsfiddle.net/3ABJC/

$('#list0,#list1,#list2').change(function() {
    if ($('#list0').is(':checked')) {
        // if either one of list1 or list2 is checked
        if ($('#list1:checked,#list2:checked').length == 1) {
            // disable the one that is not checked
            $('#list1:not(:checked),#list2:not(:checked)').prop('disabled',true);
        } else {
            // neither are checked, make sure they are all enabled
            $('#list1,#list2').prop('disabled', false);
        }
    } else {
        // if both are one and two are checked
        if ($('#list1:checked,#list2:checked').length == 2) {
            // disable zero (so you can't have all 3 checked)
            $('#list0').prop('disabled', true);
        } else {
            // otherwise, make sure all are enabled
            $('#list0,#list1,#list2').prop('disabled', false);
        }
    }
});

Answer 2

另一种可能的解决方案http://jsfiddle.net/7zQtE/

HTML

    <div><input name="list[]" id="list0" type="checkbox" value="newsletter0" />zero</div>
    <div><input name="list[]" id="list1" type="checkbox" value="newsletter1" disabled="disabled" />one</div>
    <div><input name="list[]" id="list2" type="checkbox" value="newsletter2" disabled="disabled" />two</div>
    <!-- Added button -->
    <input type="button" id="btn" value="Check" />

的Javascript

$(document).ready(function(){
    $('#list0').on('change', function(){
        $(this).prop('checked') ? $('#list1,#list2').removeAttr('disabled') : $('#list1,#list2').attr('disabled', 'disabled').removeAttr('checked');
    });

    $('#list1,#list2').on('change', function(){
        $(this).prop('checked') ? $('input[name=list\\[\\]]:not(:checked)').attr('disabled', 'disabled') : $('input[name=list\\[\\]]:not(:checked)').removeAttr('disabled');
    });

    //Added button handler
    $('#btn').on('click', function(){
        if($('#list0').prop('checked') && !$('#list1,#list2').prop('checked')){
            alert('check item 1 or 2');
        }    
    })
});

如何选择第一个带数组的复选框，并使用jquery选择任何一个兄弟

2 个答案: