jquery is unable to set the prettyCheckable plugin radio button programmatically

Question

I am using the prettyCheckable jquery plugin to make my checkboxes and radio buttons look pretty and if I use jquery to set the property checked it does not work because the plugin hides the actual checkbox and makes it's own override HTML to pretty up the checkbox/radio, therefore the jquery doesn't recognize when I check the radio or checkbox

//on button click I tried all the things, but nothing is working. please help

<input type="radio" id="rdTypeAdd" name="taxationtype" class="radiobutton" value="+" data-     label="Additive" data-customclass="margin-right" checked="checked" />    
<input type="radio" id="rdTypeSub" name="taxationtype" class="radiobutton" value="-" data-label="Subtractive" data-customclass="margin-right" />


    $('#rdTypeAdd').buttonset();
    $('[name="rdTypeAdd"][value="+"]').prop("checked", true);
    $('#rdTypeAdd').buttonset("refresh");

    //$('[name="rdTypeAdd"][value="+"]').attr("checked", true);
    //$('[name="rdTypeAdd"][value="+"]').prop("checked", true).trigger("change");

    //($('.rdTypeAdd').prop('checked',true));

score 3 · Answer 1 · answered Oct 31 '13 at 16:53

Not sure how much of a hack this is but I was able to get a div to check and uncheck a prettyCheckable checkbox. I noticed when I removing the class="checked" from the that prettyCheckable includes the checkbox became unchecked.

$("#checkbox").prettyCheckable();
    $("#checkboxDiv").click(function() {
    if ($("#checkbox").is(':checked'))
    {
        $("#checkbox").next().removeClass("checked");
        $('#checkbox').each(function(){ this.checked = false; });
    } else {
        $("#checkbox").next().addClass("checked");
        $('#checkbox').each(function(){ this.checked = true; });
    }
});

Adding or removing the "checked" class from the (which is .next() to the prettyCheckable element) and setting checked=true in the original checkbox element are both needed for it to work. Yet my if cookie is set piece is able to check the box with only the 's class. Like I said I don't know how bad of a hack this is but it worked for me hopefully it helps you out. Not sure why prettyCheckable doesn't have this ability or atleast document it because I could not find anything.

I ended up running into more issues with prettyCheckable and found several other jQuery checkbox plugins that worked much better on unheap.com — Micah, Nov 08 '13 at 18:01

score 3 · Answer 2 · answered Dec 19 '13 at 05:52

3

You can use pretty checkable functions:

$('[name="rdTypeAdd"][value="+"]').prettyCheckable('check');

and

$('[name="rdTypeAdd"][value="+"]').prettyCheckable('uncheck');

answered Dec 19 '13 at 05:52

kravits88

12,431
1
51
53

actually, it didn't work like a charm :-/ It doesn't trigger the change event for the radio field. – pymarco Jan 16 '14 at 02:40
try using $('#test').prop('checked') if you are trying to get the radio buttons checked status – kravits88 Jan 16 '14 at 03:01

score 1 · Answer 3 · answered Jan 16 '14 at 02:43

1

This answer builds off of @kravits88 and this github issue

var $radio = $('[name="rdTypeAdd"][value="+"]');
$radio.prettyCheckable('check');
$radio.prop('checked', true).change();
$radio.click();

answered Jan 16 '14 at 02:43

pymarco

7,807
4
29
40

score 0 · Answer 4 · answered Apr 02 '14 at 02:18

0

This seems to work for me. Essentially you have to find the tag parent that is created by prettyCheckable around your checkbox and set that as well as the input:

$("#element").prop("checked", true).parent().find("a:first").addClass("checked");

answered Apr 02 '14 at 02:18

Lucas Young

187
2
13

score -1 · Answer 5 · edited May 23 '17 at 11:58

-1

Setting the "checked" attribute to anything should work as shown here.

$('#rdTypeAdd').attr("checked","checked");

edited May 23 '17 at 11:58

Community

1
1

answered Aug 25 '13 at 07:22

Rick Sullivan

178
1
7

prettyCheckable jquery plugin hides the actual checkbox and makes it's own override html which is as follows
Additive
if it is simple radio button then your code i.e $('#rdTypeAdd').attr("checked","checked"); might work – user2674021 Aug 29 '13 at 11:32
even code do not work as radio button is wrrapped in prettycheckable html //$('[name="rdTypeAdd"][value="+"]').prop("checked", true); // $('#rdTypeAdd').buttonset("refresh"); //$('[name="rdTypeAdd"][value="+"]').addClass("checked"); //$('[name="rdTypeAdd"][value="+"]').prop("checked", true).trigger("change"); //$('#rdTypeAdd').buttonset("refresh"); //var value = $('[name="rdTypeAdd"]:checked').val(); – user2674021 Aug 29 '13 at 11:39

jquery is unable to set the prettyCheckable plugin radio button programmatically

5 Answers5