2

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!

Loganj99
  • 449
  • 2
  • 9
  • 26

1 Answers1

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');
});
Community
  • 1
  • 1
Omar
  • 32,302
  • 9
  • 69
  • 112