How to retain checkbox state in jQuery

Question

I have added the followng code to disable the dropdown on unchecking the checkbox in jQuery, but the checkbox is not retaining the value:

$(document).ready(function(){
    //on check of the checkbox,the dropdown is enabled or disabled.
    $("[id$=chkCashSettlementType]").toggle(
    function()
    {
        $("[id$=ddlSettlementCurrency]").attr('disabled',$("[id$=chkCashSettlementType]").not(':checked'));
        $("[id$=chkCashSettlementType]").attr('checked',false);
    },
    function()
    {
        $("[id$=ddlSettlementCurrency]").removeAttr('disabled');
        $("[id$=chkCashSettlementType]").attr('checked',true);
    }
    )
});

Where did I go wrong?

Answer 1

I'm not sure, but there is some kind of problem using checkbox and toggle(). Try this:

$(document).ready(function()
{
    //on check of the checkbox,the dropdown is enabled or disabled.
    $("[id$=chkCashSettlementType]").click(function()
    {
     if($(this).attr('checked'))
     {
      $("[id$=ddlSettlementCurrency]").attr('disabled','');
     }
     else
     {
      $("[id$=ddlSettlementCurrency]").attr('disabled', 'disabled');
     }
    });
});

Answer 2

In your code, why are you modifying the checkbox state inside your toggle method? Wouldn't it revert the state back?

Try something like,

$(document).ready(function()
{
    $("[id$=chkCashSettlementType]")
        .click(function()
               {
                    //'this' refers to your checkbox. 
                    $("[id$=ddlSettlementCurrency]").attr('disabled', $(this).checked);
               }
        );
});

Answer 3

You can use the "change" event instead of "click" or "toggle" event, this will solve your problem.

$("[id$=chkCashSettlementType]").change( 
function() 
{
 //.....
}