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

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 the property checkbox selected. If the box is checked, then enable the button, otherwise disable it. When loading the page, I will disable the button

The problem I am facing is

On page loading, disabling this button, but not adding / removing the disabled attribute based on the flag change event, I checked in firebug, introducing it a loop properly based on the marked and unchecked value.

Note. I am using jQuery mobile 1.2 and jquery 1.7. Also before posting here, I searched on google, there are many messages when turning on and off a button based on a checked checkbox. but no one solves my problem.

What is the problem? Please help me

Thanks...

Answer 1

Unable to enable button due to jQuery Mobile. In JQM, we need to update the form element by manipulating it.

Decision

  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 resolved by adding

 .button('refresh'); 

Answer 2

I'm not sure if this will solve your main problem, but according to http://api.jquery.com/prop/ you should add and remove disabled properties using the .prop () function, not the .attr () function and .removeAttr ().

To add a property:

 .prop("disabled", true); 

To remove a property:

 .prop("disabled", false); 

I came across this question looking for the above information, so I decided to share with you.

Answer 3

Like this

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

Answer 4

try it

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

Demo