JQuery checkbox enable/disable using Jquery Mobile

问题:

During page load, I have a check box that is disabled. When pushing a button, I want it enabled. It works on my desktop version, but not on my jQuery Mobile version. If I do the opposite (enable on load and use the button for disable, it works just fine). Here is the code:

Html:

<div>
     @Html.CheckBoxFor(model => model.Terms, new { id = "terms", disabled = "disabled"}) 
</div>

<div>
 <input type="button" id="blah" name="blah" data-inline="true" value="blah" />
</div>

jQuery:

<script language="javascript" type="text/javascript">
$().ready(function () {
    $("#blah").click(function () {            
        $('#terms').removeAttr('disabled');
    });
});
</script>

Any help would be greatly appreciated!

Thanks!

回答1:

First of all, you shouldn't use .ready() in jQuery Mobile. Always use jQuery Mobile events.

For your issue, you need to use .prop('disabled, false) and then call enhancement method .checkboxradio('refresh') to re-style the checkbox.

Demo

$('#blah').on('click', function () {
  $('#foo').prop('disabled', false).checkboxradio('refresh');
});