选中/取消选中任何其他复选框时,禁用/启用加上选中/取消选中复选框

时间:2013-07-02 13:08:14

标签: jquery html

我想在选中/取消选中任何其他复选框时禁用/启用加上选中/取消选中复选框。

我可以先禁用/启用但不选中/取消选中它,也就是说它在检查/取消选中第一个复选框后挂起并不完全正常工作。

预期结果。

如果选中除第一个复选框以外的任何复选框,则应首先禁用/启用复选框以及选中/取消选中。

当选中/取消选中第一个时,禁用/启用全部休息复选框。

HTML

<form>
    <label><input name="search" value="all" type="checkbox" checked="checked" />All</label>
    <label><input name="search" value="Item1" type="checkbox" />Item1</label>
    <label><input name="search" value="Item2" type="checkbox" />Item2</label>
    <label><input name="search" value="Item3" type="checkbox" />Item3</label>
    <label><input name="search" value="Item4" type="checkbox" />Item4</label>
</form>

的jQuery

$(function(){

$("input[name=search]:eq(0)").click(function(){
    if($(this).is(':checked')){
            $("input[name=search]").not(this).prop('disabled',true);
        } 
    else{
            $("input[name=search]").not(this).prop('disabled',false);
        }   
});

$("input[name=search]:not('input[name=search]:eq(0)')").click(function(){
    if($("input[name=search]").is(':checked')){
        $("input[name=search]:eq(0)").prop('disabled',true);
    }
        else{
        $("input[name=search]:eq(0)").prop('disabled',false);
    }
});

});

jsFiddle

请参阅并建议一种方法。 感谢。

2 个答案:

答案 0 :(得分:2)

您必须选中不是第一个复选框的复选框组:

if ( $("input[name=search]:not('input[name=search]:eq(0)')").is(":checked")) {   
    $("input[name=search]:eq(0)").prop('disabled',true);

演示:http://jsfiddle.net/rUm9j/7/

答案 1 :(得分:0)

<form>
<label><input name="search" value="all" type="checkbox" checked="checked" id="chkAll" />All</label>
<label><input name="search1" value="Item1" type="checkbox" />Item1</label>
<label><input name="search1" value="Item2" type="checkbox" />Item2</label>
<label><input name="search1" value="Item3" type="checkbox" />Item3</label>
<label><input name="search1" value="Item4" type="checkbox" />Item4</label>
</form>

$("#chkAll").click(function(){
    if($(this).is(':checked'))
    {
        $('input[name="search1"]').attr('disabled','disabled');
    }
    else
    {
        $('input[name="search1"]').removeAttr('disabled');
    }

});

$('input[name="search1"]').click(function(){
    if($('input[name="search1"]').is(':checked'))
{
    $("#chkAll").attr('checked',true);
     $('#chkAll').attr('disabled','disabled');
}
    else
    {
         $('#chkAll').removeAttr('disabled');
            $("#chkAll").attr('checked',false);
    }
});

演示:http://jsfiddle.net/rUm9j/6/