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?


à 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);
});

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


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.


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);
    }

}

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

Cela a fonctionné pour moi.


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');

1

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


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();
});

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


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


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/>


0

L'autre façon de faire est,

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

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


-1

case à cocher qui agit comme radio btn

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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.