How to uncheck checkbox using jQuery Uniform library

JqueryCheckbox

Jquery Problem Overview


I have a problem with unchecking a checkbox. Have a look at my jsFiddle, where I am attempting:

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

I use uniform for styling the checkbox and it simply does not work to check/uncheck the checkbox.

Any ideas?

Jquery Solutions


Solution 1 - Jquery

A simpler solution is to do this rather than using uniform:

$('#check1').prop('checked', true); // will check the checkbox with id check1
$('#check1').prop('checked', false); // will uncheck the checkbox with id check1

This will not trigger any click action defined.

You can also use:

$('#check1').click(); // 

This will toggle the check/uncheck for the checkbox but this will also trigger any click action you have defined. So be careful.

EDIT: jQuery 1.6+ uses prop() not attr() for checkboxes checked value

Solution 2 - Jquery

Looking at their docs, they have a $.uniform.update feature to refresh a "uniformed" element.

Example: http://jsfiddle.net/r87NH/4/

$("input:checkbox").uniform();

$("body").on("click", "#check1", function () {
    var two = $("#check2").attr("checked", this.checked);
    $.uniform.update(two);
});

Solution 3 - Jquery

$("#chkBox").attr('checked', false); 

This worked for me, this will uncheck the check box. In the same way we can use

$("#chkBox").attr('checked', true); 

to check the checkbox.

Solution 4 - Jquery

If you are using uniform 1.5 then use this simple trick to add or remove attribute of check
Just add value="check" in your checkbox's input field.
Add this code in uniform.js > function doCheckbox(elem){ > .click(function(){

if ( $(elem+':checked').val() == 'check' ) {
    $(elem).attr('checked','checked');			 
}
else {
    $(elem).removeAttr('checked');
}   

if you not want to add value="check" in your input box because in some cases you add two checkboxes so use this

if ($(elem).is(':checked')) {
 $(elem).attr('checked','checked');
}    
else
{    
 $(elem).removeAttr('checked');
}

If you are using uniform 2.0 then use this simple trick to add or remove attribute of check
in this classUpdateChecked($tag, $el, options) { function change

if ($el.prop) {
	// jQuery 1.6+
	$el.prop(c, isChecked);
}

To

if ($el.prop) {
	// jQuery 1.6+
	$el.prop(c, isChecked);
	if (isChecked) {
		$el.attr(c, c);
	} else {
		$el.removeAttr(c);
	}
		
}

Solution 5 - Jquery

$('#check1').prop('checked', true).uniform(); 
$('#check1').prop('checked', false).uniform(); 

This worked for me.

Solution 6 - Jquery

Just do this:

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

Solution 7 - Jquery

you need to call $.uniform.update() if you update element using javascript as mentioned in the documentation.

Solution 8 - Jquery

First of all, checked can have a value of checked, or an empty string.

$("input:checkbox").uniform();

$('#check1').live('click', function() {
	$('#check2').attr('checked', 'checked').uniform();
});

Solution 9 - Jquery

In some case you can use this:

$('.myInput').get(0).checked = true

For toggle you can use if else with function

Solution 10 - Jquery

 $("#checkall").change(function () {
            var checked = $(this).is(':checked');
            if (checked) {
                $(".custom-checkbox").each(function () {
                    $(this).prop("checked", true).uniform();
                });
            } else {
                $(".custom-checkbox").each(function () {
                    $(this).prop("checked", false).uniform();
                });
            }
        });

        // Changing state of CheckAll custom-checkbox
        $(".custom-checkbox").click(function () {
            if ($(".custom-checkbox").length == $(".custom-checkbox:checked").length) {
                $("#chk-all").prop("checked", true).uniform();
            } else {
                $("#chk-all").removeAttr("checked").uniform();
            }
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id='checkall' /> Select All<br/>
 <input type="checkbox" class='custom-checkbox' name="languages" value="PHP"> PHP<br/>
 <input type="checkbox" class='custom-checkbox' name="languages" value="AngularJS"> AngularJS<br/>
 <input type="checkbox" class='custom-checkbox' name="languages" value="Python"> Python<br/>
 <input type="checkbox" class='custom-checkbox' name="languages" value="Java"> Java<br/>

Solution 11 - Jquery

The other way to do is is,

use $('#check2').click();

this causes uniform to check the checkbox and update it's masks

Solution 12 - Jquery

checkbox that act like radio btn

$(".checkgroup").live('change',function() { var previous=this.checked; $(".checkgroup).attr("checked", false); $(this).attr("checked", previous); });

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionUpCatView Question on Stackoverflow
Solution 1 - JqueryMr.HuntView Answer on Stackoverflow
Solution 2 - Jqueryuser113716View Answer on Stackoverflow
Solution 3 - Jqueryuser1683014View Answer on Stackoverflow
Solution 4 - JquerySohail AhmedView Answer on Stackoverflow
Solution 5 - JqueryParijatView Answer on Stackoverflow
Solution 6 - JquerymoledetView Answer on Stackoverflow
Solution 7 - JqueryAdeelView Answer on Stackoverflow
Solution 8 - Jquerynyuszika7hView Answer on Stackoverflow
Solution 9 - JqueryLarionov NikitaView Answer on Stackoverflow
Solution 10 - JqueryP.MondalView Answer on Stackoverflow
Solution 11 - JqueryHailwoodView Answer on Stackoverflow
Solution 12 - JqueryRaDoView Answer on Stackoverflow