web-dev-qa-db-fra.com

jQuery .prop ('vérifié', faux) ne fonctionne pas

HTML:

<form class="form">
    <input type="checkbox" id="box" /> Check Me!
</form>

JS:

$( window ).load( function() {

    var myFunc = function() {

        if( $( '#box' ).prop( 'checked', false ) ) {
            $( '.form' ).append( '<p>Checkbox is not checked.</p>' );
        }

    }

    $( '#box' ).on( 'change', myFunc );

} );

Voici un JSFiddle http://jsfiddle.net/3PYm7/

Lorsque j'utilise $( '#box' ).prop( 'checked', false ) comme condition pour l'instruction if, cela ne fonctionne pas, mais ! $( '#box' ).prop( 'checked' ) fonctionne parfaitement!

javascriptjqueryhtmlprop
5
Mahmoud Saeed

L'instruction $('#box').prop('checked', false) ne renvoie pas de booléen. Définissez plutôt la propriété vérifiée sur false. Elle ne doit donc pas être utilisée dans les conditions et son comportement normal.

if($('#box').prop('checked', false))

Peut être modifié pour tester en utilisant is() avec le sélecteur :checked.

if($('#box').is(':checked'))

ou

if($('#box:checked').length)

Vous pouvez obtenir les meilleures performances en utilisant le javascript natif 

if(document.getElementById('box').checked)

L'instruction de travail $('#box').prop('checked') que vous avez mentionnée renvoie la valeur de la propriété cochée au lieu de la définition.

21
Adil
  if ($('#box').prop('checked')==false) {
      $('.form').append('<p>Checkbox is not checked.</p>');
  }
4
Amarnath R Shenoy

oui c'est un connu,

$('#box').prop('checked', false) est une version de définition, elle renverrait l'élément sur lequel la méthode .prop() a été appelée, et non un résultat booléen. Vous devriez plutôt utiliser la version getter pour obtenir la valeur booléenne, $('#box').prop('checked')

Lisez ici pour en savoir plus sur .prop(property)

2
Rajaprabhu Aravindasamy

Essaye ça

if($('#box').is(':checked')) // this will return true or false
2
Sridhar R

Vous avez plus de problèmes que d'utiliser un n paramètre qui ne renvoie pas de booléen pour tester une propriété.

Votre code, une fois corrigé, ajoutera le message à chaque fois que vous décochez la case.

Je suggère ceci

Live Demo

$(function() {
   $('#myform').on("submit", function(e) {
     var checked = $('#box').is(":checked");
     $('#pleaseCheckBoxMessage').toggle(!checked);
     if (!checked) {
       e.preventDefault(); // stop submission
     }
  });
  $("#box").on("click",function() {
    $('#pleaseCheckBoxMessage').toggle(!this.checked);
  });  
});
2
mplungjan

Ceci est un problème général avec jQuery, l’idée était d’avoir le même nom de fonction pour obtenir et définir une valeur via jQuery, mais c’est très déroutant pour les nouveaux arrivants.

Par exemple .val ('bla') définit la valeur bla mais .val () renvoie la valeur actuelle ... C'est à peu près la même chose pour attr, prop, ... et chacun d'eux a une question StackOverflow car quelqu'un comprendre comment cela était supposé fonctionner. S'il avait été appelé getProp, setProp, ces problèmes n'existeraient pas.

0
Christophe Roussy

Essayez comme ça. C’est aussi un autre moyen de vérifier 

if (!$('#box').prop('checked')) {
        $('.form').append('<p>Checkbox is not checked.</p>');
    }

Mise à jour de la démo

$('#box').prop('checked') Il retournera vrai ou faux quand la case à cocher sera changée 

0
Balachandran