How to uncheck checkbox using jQuery Uniform library
JqueryCheckboxJquery 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); });