CODEWITHSUNDEEP
jquery-mobilecheckbox
user1166145
user1166145

Reputation: 203

Why am I unable to uncheck a checkbox in JQuery Mobile?

This seems like it would have a really obvious answer, however I cannot get a simple checkbox to uncheck with JQuery once I add Jquery Mobile.

Here is some very simple code as an illustration:

<html>
<head>
    <title>Untitled</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

<script>

    jQuery(function () {

        jQuery('#a').change(function () {

            if (jQuery(this).is(':checked')) {
                jQuery('#b').removeAttr('checked');
            }

        });

        jQuery('#b').change(function () {

            if (jQuery(this).is(':checked')) {
                jQuery('#a').removeAttr('checked');


            }

        });

    });

</script>
</head>

<body>

<input type="checkbox" id="a"><label for="a">AAAA</label>

<input type="checkbox" id="b"><label for="b">BBBB</label>

</body>
</html>

This is a simple bit of code. When Checkbox 'A' gets checked, it should uncheck checkbox 'B', and vise verse. However it doesn't, and no error is written to the console.

This is using the standard version of Jquery & Jquery Mobile, linked directly to their site

If I remove the Jquery Mobile elements, by removing the following lines, then it works fine

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

Can anyone please enlighten me as to where I am going wrong, since this seems so simple yet I'm at an absolute loss as to what is going on.

Many thanks

Upvotes: 2

Views: 928

Answers (1)

Omar
Omar

Reputation: 31732

Because you need to use .prop and then re-apply styles using .checkboxradio('refresh').

Check

$('selector').prop('checked', true).checkboxradio('refresh');

Uncheck

$('selector').prop('checked', false).checkboxradio('refresh');

Upvotes: 3

Related Questions