Comment décocher la case à l'aide de la bibliothèque jQuery Uniform

144

J'ai un problème en décochant un fichier checkbox. Jetez un œil à mon jsFiddle , où je tente:

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

J'utilise l' uniforme pour styliser le checkboxet cela ne fonctionne tout simplement pas pour cocher / décocher le checkbox.

Des idées?

Vote favorable
la source
à la fois dans google chrome et firefox, cela ne fonctionne pas pour moi
Vote positif

Réponses:

108

En regardant leurs documents, ils ont une $.uniform.updatefonctionnalité pour rafraîchir un élément "en uniforme".

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

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

$("body").on("click", "#check1", function () {
    var two = $("#check2").attr("checked", this.checked);
    $.uniform.update(two);
});
utilisateur113716
la source
5
@mkoryak: Fonctionne bien dans 1.4.4, mais les liens vers les fichiers js et css étaient rompus. Voici un violon mis à jour. Si vous voulez dire qu'il y aura des problèmes spécifiquement dans 1.6, alors c'est probablement vrai puisque jQuery a changé puis rétabli le comportement de .attr(). En utilisant 1.6ou supérieur, vous devriez vraiment utiliser .prop().
user113716
Je ne vois absolument aucune différence entre le jsFiddle mis à jour et l'original (jusqu'à la mauvaise étiquette de la case 2), sauf que la version mise à jour fonctionne pour moi et l'original ne l'a pas fait!?!?
iPadDeveloper2011
BTW, toutes ces formes uniformes dessinées au pixel semblent très peu sexy sur Retina.
incarné
n'a pas fonctionné pour moi aussi jsfiddle ne fonctionne pas ou est déroutant
matthy
367

Une solution plus simple consiste à faire cela plutôt que d'utiliser uniform:

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

Cela ne déclenchera aucune action de clic définie.

Vous pouvez aussi utiliser:

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

Cela basculera la coche / décocher la case à cocher, mais cela déclenchera également toute action de clic que vous avez définie. Donc sois prudent.

EDIT : jQuery 1.6+ utilise la valeur prop()non attr()cochée pour les cases à cocher

Monsieur Chasse
la source
2
Cela laisse l'attribut vérifié tel quel dans jQuery 1.7.1 pour moi. Fonctionne mais ne fait pas ce que vous pensez qu'il devrait.
2rs2ts
24
$("#chkBox").attr('checked', false); 

Cela a fonctionné pour moi, cela va décocher la case. De la même manière que nous pouvons utiliser

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

pour cocher la case.

user1683014
la source
4
Je pense qu'il est préférable d'utiliser la fonction .prop () au lieu de .attr (). Sinon, cela ne fonctionnera pas toujours comme prévu ...
Simon Steinberger
13

Si vous utilisez l' uniform 1.5, utilisez cette astuce simple pour ajouter ou supprimer l'attribut de check.
Ajoutez simplement value = "check" dans le champ de saisie de votre case à cocher.
Ajouter ce code dans uniform.js> function doCheckbox(elem){>.click(function(){

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

si vous ne voulez pas ajouter value = "check" dans votre zone de saisie car dans certains cas vous ajoutez deux cases à cocher alors utilisez ceci

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

Si vous utilisez uniform 2.0, utilisez cette astuce simple pour ajouter ou supprimer un attribut de vérification
dans ce classUpdateChecked($tag, $el, options) {changement de fonction

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

À

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

}
Sohail Ahmed
la source
7
$('#check1').prop('checked', true).uniform(); 
$('#check1').prop('checked', false).uniform(); 

Cela a fonctionné pour moi.

Parijat
la source
Merci beaucoup. Je peux confirmer que c'est la solution la plus simple.
Rudolph Opperman
2

Faites juste ceci:

$('#checkbox').prop('checked',true).uniform('refresh');
moledet
la source
1

vous devez appeler $.uniform.update()si vous mettez à jour l'élément en utilisant javascript comme mentionné dans la documentation.

Adeel
la source
1

Tout d'abord, checkedpeut avoir une valeur de checked, ou une chaîne vide.

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

$('#check1').live('click', function() {
    $('#check2').attr('checked', 'checked').uniform();
});
nyuszika7h
la source
Il n'y a rien de mal à passer un booléen comme valeur de checked.
user113716
Mais nous n'écrivons pas de balisage HTML. Nous définissons une propriété sur le HTMLInputElement. Jetez un œil à la checkedpropriété.
user113716
Qu'à cela
la transmission d'une valeur booléenne n'est prise en charge que dans la version 1.6+, avant cela, vous deviez définir l'attribut vérifié sur «vérifié» ou le supprimer.
mkoryak
1

Dans certains cas, vous pouvez utiliser ceci:

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

Pour basculer, vous pouvez utiliser if else avec la fonction

Larionov Nikita
la source
1

 $("#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/>

P.Mondal
la source
0

L'autre façon de faire est,

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

cela oblige l'uniforme à cocher la case et à mettre à jour ses masques

Hailwood
la source
-1

case à cocher qui agit comme radio btn

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

RaDo
la source