jQuery Uniform Checkbox does not (un)check

Question

I am using jQuery Uniform to style inputs/selects etcs. However, the checkbox has stopped working. I am appending data sent from an ajax call. Once it's loaded, I use $.uniform.update("input:checkbox") to update the new html. When attempting to (un)check the input it works only once. If I want to (un)check it again, it doesn't change at all.

I've attempted changing the Uniform Javascript so that all the actions (ie. click, focus, blur etc) are under the .live function. (ie. .live("click",). This just stops anything from working.

Update:

I've read through the Uniform JS entirely and discovered a problem:

if(!$(elem).attr("checked")){
    //box was just unchecked, uncheck span
    spanTag.removeClass(options.checkedClass);
}else{
    //box was just checked, check span.
    spanTag.addClass(options.checkedClass);
}

The .attr("checked") syntax fails. It will always return false. Why? I don't know. As well as this, it doesn't update the original input to either remove the checked attribute or to set the checked attribute.

I've run through the official website and found it doesn't update the checkbox input. So it's not just me xP

I've Googled around a bit and found various methods for checking if a checkbox is checked however the following methods fail:

if ($(elem).attr("checked")) // The original.
if ($(elem).attr("checked") == true)
if ($(elem).is(":checked"))
if ($(elem).checked)
// and:
var check = $(elem).match(/checked=/);
if (check == null)

Words of guidance are very much appreciated~ :3

Mick · Answer 1 · 2013-05-13T07:21:43.723

62

SIMPLE SOLUTION

This is because UniformJs requires that you update your modification on uniform elements if you need to change values on the form dynamically:

$('#checkbox').prop('checked',true);
$.uniform.update();

Edit

If you wish to update the #checkbox only:

$('#checkbox').prop('checked',true);
$.uniform.update('#checkbox');

edited May 13 '13 at 07:21

answered May 13 '13 at 07:16

Mick

26,684
12
104
126

score 28 · Answer 2 · answered Jan 25 '15 at 13:37

28

Just do this:

$('#checkbox').prop('checked',true).uniform('refresh');

answered Jan 25 '15 at 13:37

moledet

869
10
18

score 7 · Answer 3 · answered Sep 08 '11 at 17:53

I know this may be a bit late, but hopefully it will help someone. I had to add a couple lines to the uniform code so it would look for pre checked checkboxes. This code starts at line 262 for me. I am using Uniform version 1.7.5. The lines between the 'added by John' notes are what I added.

        "click.uniform touchend.uniform": function(){
      if(!$(elem).attr("checked")){
        //box was just unchecked, uncheck span
        spanTag.removeClass(options.checkedClass);
      // Added by John to look for checkboxes with the attr "checked" that have been click to uncheck
      }else if(!$(elem).is(':checked')){
        spanTag.removeClass(options.checkedClass);
      // end addition by john
      }else{
        //box was just checked, check span.
        spanTag.addClass(options.checkedClass);
      }
    },

This doesn't work for jQuery 1.6.4, since `if(!$(elem).attr("checked")){` only checks if the checkbox was checked when the page was loaded. This is different behaviour than previous versions of jQuery. Use `prop` instead of `attr` to determine the _current_ status of "checked". — Grant, Oct 19 '11 at 03:43
Excellent John tried Alex's method of changing .attr to .prop on my jquery.uniform.min file but did not fix the problem. Implemented your solution as well as add in Grants change and it worked a treat. Thanks guys. Using jQuery1.6.4 by the way. — Cragly, Oct 19 '11 at 18:12

score 3 · Answer 4 · answered Jan 30 '13 at 19:08

Its been a while but I had the same problem but I resolved it by a simple solution.

Uniform is adding a span over the checkbox and gives it the class checked if it is checked or not, but on page load only. If you check or uncheck the checkbox while the page is already loaded, it will uncheck (or check) but since the span is over it, you will see it as not updated, you have to do it manually.

$('#myDiv input[type=checkbox]').attr('checked',true);
$('#myDiv input[type=checkbox]').parent().addClass('checked');

or

$('#myDiv input[type=checkbox]').attr('checked',false);
$('#myDiv input[type=checkbox]').parent().removeClass('checked');

Might not be the cleanest solution, but works fine on every browser.

This code works fine for me. Second line of code alone did the trick. Thanks — Sree, Feb 13 '13 at 06:45
Hey Jean-Francois, this is because Uniform elements need to be updated after modification, I have posted an explanation [in this answer](http://stackoverflow.com/questions/6637723/jquery-uniform-checkbox-does-not-uncheck/16516652#16516652). — Mick, May 13 '13 at 07:24

score 2 · Answer 5 · answered Oct 19 '11 at 03:40

jQuery 1.6.4 changed the meaning of the attr() function, which is used by jquery.uniform.js. attr() now returns the state that the attribute WAS in when the page loaded - not what the state of the attribute is NOW. There is a replacement function called prop(), which does the job that attr() used to do.

To fix the plugin, replace each occurrence of attr("checked") with prop("checked"). Also, change attr("disabled") to prop("disabled").

That should fix your project up. It worked for me ;-)

See also: https://github.com/pixelmatrix/uniform/pull/167, which attempts to address the issue with better backwards compatibility.

score 1 · Answer 6 · answered Sep 26 '11 at 10:20

I believe the latest version of Jquery uses a different method to evaluate a :checked value. Using a slightly older version (although not ideal) fixed this problem for me. That was a while ago though, and PixelMatrix still don't seem to have updated Uniform.

score 0 · Answer 7 · edited Oct 03 '12 at 18:16

You don't need to change .attr() to .prop():

    "click.uniform touchend.uniform": function(){
        if(!$(elem).attr('checked')){
            //box was just unchecked, uncheck span
            spanTag.removeClass(options.checkedClass);

            //Added by PingOn
            $(elem).removeAttr('checked');
            //end addition by PingOn

            // Added by John
        }else if(!$(elem).is(':checked')){
            spanTag.removeClass(options.checkedClass);
            // end addition by john

            //Added by PingOn
            $(elem).removeAttr('checked');
            //end addition by PingOn
        }else{
            //box was just checked, check span.
            spanTag.addClass(options.checkedClass);

            //Added by PingOn
            $(elem).attr('checked','true');
            //end addition by PingOn
      }

score 0 · Answer 8 · answered Jul 09 '11 at 21:57

0

Couldn't you use something like

$("#checkbox").attr("checked", "true");

to make the checkbox checked, and

$("#checkbox").removeAttr("checked");

to uncheck it?

answered Jul 09 '11 at 21:57

Mads Ohm Larsen

2,415
3
15
19

These methods would work once a syntax has discovered if the element is already checked. Thanks anyway :D – nderjung Jul 09 '11 at 22:49
Ahh, misunderstood the problem then :) – Mads Ohm Larsen Jul 10 '11 at 18:23

jQuery Uniform Checkbox does not (un)check

8 Answers8

SIMPLE SOLUTION

Edit

Linked