CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
Jacek Kostrzewski
Jacek Kostrzewski

Reputation: 3

Visual state of check box doesn't change

I have problems with programmatic change of state of a check box. I want to be able to load a value (true/false) from the database and display it accordingly. For testing I used a button, which triggers change of "changed" property, simulating reading the database. Clicking this button changes that property, which I can confirm after the click, however the visual state of the check-box remains unchanged.

Here is the jsfiddle link http://jsfiddle.net/xLrFq/203/

Html:

<input id="check1" type="checkbox" />
<label for="check1">Check me</label>
<p></p>
<button id="btnSet">Set Checked</button>

JScript:

$( "input" ).change(function() {
var $input = $( this );
$( "p" ).html( ".attr( 'checked' ): <b>" + $input.attr( "checked" ) + "</b><br>" +
  ".prop( 'checked' ): <b>" + $input.prop( "checked" ) + "</b><br>" +
  ".is( ':checked' ): <b>" + $input.is( ":checked" ) + "</b>" );
  })
  .change();

$("#btnSet").click( function() {
    $("#check1").prop('checked',true).change();
});

Upvotes: 0

Views: 212

Answers (1)

Sga
Sga

Reputation: 3658

You have to call checkboxradio("refresh") after you modify the checked property to update the visual state of the element (see the API).

Updated JSFiddle

Upvotes: 1

Related Questions