Comment désélectionner un bouton d'option de conception personnalisée dans Framework7?

Question

J'ai un problème avec le bouton radio design personnalisé, je veux laisser l'utilisateur décocher le bouton radio.

Voici le code html:

<input type="radio" id="tip11" name="tip1" value="Stan" /> 
<label for="tip11">Stan<span></span></label> <br><br> 

est ici Code css:

input[type="radio"] { 
    display:none; 
} 
input[type="radio"] + label span { 
    display:inline-block; 
    width: 20px; 
    height: 20px; 
    margin: 0 10px 0 0; 
    vertical-align:middle; 
    background:url(../images/checkbox.png) left top no-repeat; 
    background-size: 20px 20px; 
    cursor:pointer; 
    border-radius: 2px; 
    float:right; 
} 
input[type="radio"]:checked + label span { 
    background-color: #4bc2ff; 
} 

Et voici le code JS dans Framework7:

$$('#cc').click(function (e) { 
    console.log('cao'); 
    $$('#sortForm11').prop('checked', false); 
}); 

Juste pour objectif de test I wonted à être capable de cliquer et dans le même événement pour être en mesure de cocher et de décocher le bouton radio, mais le bouton radio de conception personnalisée reste cochée.

Answer 1

$$('input[name=sortForm11] + label span').on('click', function (e) { 
     var $radio = $(this).parent().prev(); 
     // if this was previously checked 
     if ($radio.is(':checked')) { 
      $$('input[name=sortForm11]').removeAttr('checked'); 
      $radio.removeAttr('checked'); 
      //onsole.log('cao1'); 
     } else { 
      $$('input[name=sortForm11]').removeAttr('checked'); 
      $radio.attr('checked', 'checked'); 
      //console.log('cao2'); 
     } 
     e.preventDefault(); 
});