utilizzando la casella di controllo come pulsante di opzione

Sto cercando un modo per gli utenti di selezionare una delle due opzioni (forza o debolezza) per un elenco di qualità.

per esempio:

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

Il pulsante di opzione mi consente di selezionare un punto di forza o di debolezza. Tuttavia, voglio che l’utente controlli solo le qualità che si applicano e se un utente seleziona accidentalmente una qualità non c’è modo di annullare la selezione per un pulsante radio a meno che non ci sia un terzo pulsante radio chiamato non applicabile o l’utente reinserisca la pagina. Mi chiedevo se c’è un modo per essere in grado di ottenere la flessibilità di una casella di controllo (selezionare / deselezionare) oltre a disabilitare o abilitare l’altra casella di controllo quando uno di questi è selezionato o deselezionato anziché utilizzare tre pulsanti di opzione.

Non penso di aver visto questo comportamento prima, quindi mi chiedo se c’è un modo più elegante per farlo. Sono aperto ad altre idee per ottenere la stessa funzionalità. Usare una casella di controllo come pulsante radio era solo un pensiero.

grazie mille

Soluzione basata su javascript

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

Demo di lavoro

Soluzione basata su jQuery

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

Demo di lavoro

Non dovresti usare le checkbox come pulsanti radio (o viceversa): questo è incoerente con il modello mentale dell’utente, quindi confonde le persone.

Questo è un problema senza soluzione ideale, ma il tuo suggerimento iniziale di avere un’opzione “non applicabile” come parte di un gruppo di 3 pulsanti radio è abbastanza comune. Se pre-selezioni l’opzione “non applicabile” di default e forse de-enfatizza visivamente (ad es. Grigio fuori) allora dal punto di vista dell’utente sarà quasi come se ci fossero solo 2 opzioni, ma possono recuperare se ne selezionano accidentalmente uno e vogliono “deselezionarlo”.

questa è la forma corretta, “controllato” è un proprietario e non un attributo

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