CODEWITHSUNDEEP
jqueryhtml
user1411607
user1411607

Reputation:

Disable/Enable plus checked/unchecked first checkbox when any other checkbox is checked/unchecked

I want to Disable/Enable plus checked/unchecked first checkbox when any other checkbox is checked/unchecked.

I am able to Disable/Enable first but not checked/unchecked it, also it is not exactly working as desired it hangs after checking/unchecking first checkbox.

Result expected.

When any checkbox except first one is checked, first checkbox should be disable/enable plus checked/unchecked.

When first one is checked/unchecked then disable/enable rest all checkbox.

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

Please see and suggest ay way to do it. Thanks.

Upvotes: 0

Views: 1732

Answers (2)

Jaimin
Jaimin

Reputation: 8020

<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);
    }
});

Demo: http://jsfiddle.net/rUm9j/6/

Upvotes: 0

tymeJV
tymeJV

Reputation: 104775

You have to check the group of checkboxes that isn't the first checkbox:

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

Demo: http://jsfiddle.net/rUm9j/7/

Upvotes: 1

Related Questions