en utilisant la case à cocher comme bouton radio

Question

Je cherche un moyen pour les utilisateurs de choisir l'une des deux options (force ou faiblesse) pour une liste de qualités.

pour par exemple:

    strength  weakness not applicable 
1. Communication 
2. Punctuality 
    ... 

bouton radio me permet de sélectionner une force ou une faiblesse. Cependant, je veux que l'utilisateur vérifie seulement les qualités qui s'appliquent et si un utilisateur sélectionne accidentellement une qualité il n'y a aucun moyen d'annuler la sélection pour un bouton radio à moins qu'un troisième bouton radio ne soit pas applicable ou que l'utilisateur rentre la page. Je me demandais s'il y avait un moyen d'obtenir la flexibilité d'une case à cocher (cocher/décocher) en plus de désactiver ou d'activer l'autre case lorsque l'une d'elles est cochée ou décochée au lieu d'utiliser trois boutons radio.

Je ne pense pas avoir déjà vu ce comportement, alors je me demande s'il existe une façon plus élégante de le faire. Je suis ouvert à d'autres idées pour obtenir la même fonctionnalité. Utiliser une case à cocher comme bouton radio n'était qu'une idée.

merci beaucoup.

Answer 1

Solution basée sur javascript

function SetSel(elem) 
{ 
    var elems = document.getElementsByTagName("input"); 
    var currentState = elem.checked; 
    var elemsLength = elems.length; 

    for(i=0; i<elemsLength; i++) 
    { 
    if(elems[i].type === "checkbox") 
    { 
     elems[i].checked = false; 
    } 
    } 

    elem.checked = currentState; 
}​ 

<input type="checkbox" class="chkclass" onclick="SetSel(this);" /> 
<input type="checkbox" class="chkclass" onclick="SetSel(this);" /> 
<input type="checkbox" class="chkclass" onclick="SetSel(this);" /> 
<input type="checkbox" class="chkclass" onclick="SetSel(this);" /> 

Working Demo

Solution basée sur jQuery

$(function(){ 
    $("input:checkbox.chkclass").click(function(){ 
     $("input:checkbox.chkclass").not($(this)).removeAttr("checked"); 
     $(this).attr("checked", $(this).attr("checked"));  
    }); 
});​ 

<input type="checkbox" class="chkclass" /> 
<input type="checkbox" class="chkclass" /> 
<input type="checkbox" class="chkclass" /> 
<input type="checkbox" class="chkclass" /> 

Working Demo

Answer 2

Vous ne devez pas utiliser les cases à cocher les boutons radio (ou vice-versa): cela est incompatible avec le modèle mental de l'utilisateur, il confond les gens.

Ceci est un problème sans solution idéale, mais votre suggestion initiale d'avoir une option "non applicable" dans le cadre d'un groupe de 3 boutons radio est assez courante. Si vous présélectionnez l'option "non applicable" par défaut et que vous la désactivez visuellement (par exemple, si elle est grise), du point de vue de l'utilisateur, ce sera presque comme s'il n'y avait que deux options, mais elles peuvent récupérer si elles en sélectionnent accidentellement un et que vous voulez le "désélectionner".

Answer 3

ceci est une forme correcte, « vérifié » est un propriétaire et non attribut

$(function(){ 
     $("input:checkbox.chkclass").each(function(){ 
     $(this).change(function(){ 
      $("input:checkbox.chkclass").not($(this)).prop("checked",false); 
      $(this).prop("checked", $(this).prop("checked"));  
     }); 
     }); 
    });