Materializecss - case à cocher radio prop avec jQuery on click

Question

J'ai 1 élément radio, et je veux qu'il se comporte comme une case à cocher. Alors maintenant, il est sélectionné mais je ne pouvais pas le lier à l'état prop sur clic.

Donc, je veux atteindre est: lorsqu'on clique sur radio btn, il inverse son état vérifié.

Voici ce que j'ai essayé:

<form action="#"> 
    <p> 
     <input name="group" type="radio" id="test" /> 
     <label for="test">Red</label> 
    </p> 
</form> 


$(document).ready(function() { 
    $('#test').click(function() { 
     $('#test').prop('checked', !$('#test').prop('checked')) 
    }) 
}) 

Ce qui est intéressant, si je crée un autre bouton et le lier à changer checked valeur, il fonctionne

<button id="faker" type="button"> 
    Faker Btn 
</button> 

$('#faker').click(function() { 
    $('#test').prop('checked', !$('#test').prop('checked')) 
}) 

Voici un violon: https://jsfiddle.net/55L52yww/81/

Answer 1

Une radio peut se comporter comme une case à cocher si vous ajoutez un attribut d'état à l'élément radio comme dans:

<input name="group" type="radio" id="test" data-state="false"/> 

Maintenant, vous pouvez enregistrer le dernier état et comparer avec la valeur actuelle afin de décider de l'action à effectuer.

L'extrait:

$('#test').on('click', function(e) { 
 
    var a = $(this).data('state'); 
 
    var b = $(this).prop('checked'); 
 
    if (a && b) { 
 
     b = false; 
 
     $(this).prop('checked', b); 
 
    } 
 
    $(this).data('state', b); 
 
})

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script> 
 

 

 
<form action="#"> 
 
    <p> 
 
     <input name="group" type="radio" id="test" data-state="false"/> 
 
     <label for="test">Red</label> 
 
    </p> 
 
</form>

Answer 2

Quand vous entrez dans la fonction qui a été déclenchée par le bouton radio lui-même, a déjà changé l'état de la propriété checked. Cela provoque un problème sur le premier clic, car le nouvel état est true et par conséquent votre fonction le définit à false.

Vous pouvez résoudre ce problème en gardant la trace de l'état checked dans un attribut séparé data et en le vérifiant à la place.

$(function() { 
 
    $('#test').click(function() { 
 
    var $this = $(this); 
 
    if ($this.data('previousState')) { 
 
     $this.prop('checked',false).data('previousState',false); 
 
    } 
 
    else { 
 
     $this.prop('checked',true).data('previousState',true); 
 
    } 
 
    }); 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script> 
 
<form action="#"> 
 
    <p> 
 
    <input name="group1" type="radio" id="test" /> 
 
    <label for="test">Red</label> 
 
    </p> 
 
</form>