Unable to add/remove disabled attribute in button based on checkbox checked property

Question

Jquery:

<script type="text/javascript">

function  enableDisableButton() {

    var isChecked = ($('input[name=ignore-checkbox]').is(':checked'));

    if (isChecked == true) {
        $("button[name=set-up-account]").removeAttr("disabled");
    }
    else {
        $("button[name=set-up-account]").attr("disabled", "disabled");
    }

}

$('#mobilePage').live('pageinit', function (event) {    //document ready for jquery mobile

    enableDisableButton();

    $('#ignore-checkbox').bind("change", function () {
        enableDisableButton();
    });

});
  </script>

Html:

 @using (Html.BeginForm("Account", "SetUpAccount", FormMethod.Post, new { @id = "account-set-up", @data_ajax = "false" }))
 {       

     <div class="ui-grid-a field">
        <div class="ui-block-a" style="width:140px;">
         <label for="ignore-checkbox">Ignore</label>
         <input type="checkbox" name="ignore-checkbox" id="ignore-checkbox"/>
        </div>
     </div>

     <div style="width:100%;float:left;">
         <button type="submit" name="set-up-account" id="set-up-account"  data-inline="true"  data-mini="true">Set Up Account</button>
     </div>
  }

I want to enable/disable the Set Up Account button based on check box checked property. If checkbox is checked, then enable the button, else disable. On page load i am disabling the button

The problem i am facing is,

On page load, its disabling the button, but its not adding/removing the disabled attribute based on change event of check box, i checked in firebug, its entering the loop properly based on checked and unchecked value.

Note: I am using Jquery mobile 1.2 and jquery 1.7. Also before posting here i searched in google, there are many postings under enabling and disabling of button based on checkbox checked value. but none solves my issue.

What's the problem? please help me

Thanks...

Answer 1

I'm not sure if this will help solve your main problem, but according to http://api.jquery.com/prop/ you should be adding and removing the disabled property using the .prop() function, not the .attr() and .removeAttr() functions.

To add the property:

.prop("disabled", true);

To remove the property:

.prop("disabled", false);

I stumbled across this question while looking for the above info, so I thought I'd share.

Answer 2

Its not enabling the button because of Jquery Mobile. In JQM, we need to refresh the form element, while manipulating it

The solution is

    function  enableDisableButton() {

    var isChecked = ($('input[name=ignore-checkbox]').is(':checked'));

    if (isChecked) {
        $("button[name='set-up-account']").removeAttr("disabled").button('refresh');
    }
    else {
        $("button[name='set-up-account']").attr("disabled", "disabled").button('refresh');
   }
}

$('#mobilePage').live('pageinit', function (event) {

    enableDisableButton();

    $('#ignore-checkbox').bind("change", function () {
        enableDisableButton();
    });
});

The problem was solved by adding

.button('refresh');

Answer 3

Like this one

  $('#setagb').change(function(){
        if ($(this).is(':checked'))
        {
            $("#submit").removeAttr("disabled");
        }
        else
        {
            $("#submit").attr( "disabled", "disabled" );
        }               
  });

Answer 4

Try this

$("input[name=ignore-checkbox]").click(function() {
  $("button[name=set-up-account]").attr("disabled", this.checked);
});

DEMO