Abilitazione e disabilitazione dei pulsanti di opzione in base alla selezione utente

Question

Sto cercando di scrivere jQuery per abilitare solo i pulsanti di opzione in base ai pulsanti di opzione attualmente selezionati in base a una determinata logica aziendale.

Essenzialmente ci sono 3 gruppi di 3 pulsanti di opzione, che finiscono per guardare qualcosa di simile (le mie scuse per essere stato prolisso con questo esempio HTML, ma sperando che questo mostrerà cosa intendo):

<p> 
    <label for="group_one">Group One</label> 
</p> 
<p> 
    <div class="group_one"> 
    <div id="group_one_choice_one"> 
     <label for="group_one_choice_one">Choice One</label> 
     <br /> 
     <input checked="checked" id="choice_one" type="radio" value="1" /> 
     <br /> 
    </div> 
    <div id="group_one_choice_two"> 
     <label for="group_one_choice_two">Choice Two</label> 
     <br /> 
     <input id="group_one_choice_two" type="radio" value="2" /> 
     <br /> 
    </div> 
    <div id="group_one_choice_three"> 
     <label for="group_one_choice_three">Choice Three</label> 
     <br /> 
     <input id="choice_three" type="radio" value="3"/ > 
     <br /> 
    </div> 
    </div> 
</p> 
<p> 
    <label for="group_two">Group Two</label> 
</p> 
<p> 
    <div class="group_two"> 
    <div id="group_two_choice_one"> 
     <label for="group_two_choice_one">Choice One</label> 
     <br /> 
     <input checked="checked" id="choice_one" type="radio" value="1" /> 
     <br /> 
    </div> 
    <div id="group_two_choice_two"> 
     <label for="group_two_choice_two">Choice Two</label> 
     <br /> 
     <input id="group_two_choice_two" type="radio" value="2" /> 
     <br /> 
    </div> 
    <div id="group_two_choice_three"> 
     <label for="group_two_choice_three">Choice Three</label> 
     <br /> 
     <input id="choice_three" type="radio" value="3"/ > 
     <br /> 
    </div> 
    </div> 
</p> 
<p> 
    <label for="group_three">Group Three</label> 
</p> 
<p> 
    <div class="group_three"> 
    <div id="group_three_choice_one"> 
     <label for="group_three_choice_one">Choice One</label> 
     <br /> 
     <input checked="checked" id="choice_one" type="radio" value="1" /> 
     <br /> 
    </div> 
    <div id="group_three_choice_two"> 
     <label for="group_three_choice_two">Choice Two</label> 
     <br /> 
     <input id="group_three_choice_two" type="radio" value="2" /> 
     <br /> 
    </div> 
    <div id="group_three_choice_three"> 
     <label for="group_three_choice_three">Choice Three</label> 
     <br /> 
     <input id="choice_three" type="radio" value="3"/ > 
     <br /> 
    </div> 
    </div> 
</p> 

Dove diventa complicato è la logica necessaria per determinare quali pulsanti di opzione visualizzare e quali abilitare. Un utente deve selezionare una scelta da ciascun gruppo, ma non può ripetere la stessa scelta da un gruppo all'altro.

Idealmente quando l'utente accede alla pagina, tutti i pulsanti di opzione sarebbero disponibili ma non selezionati.

Se l'utente deve prima selezionare (ad esempio) la scelta due nel gruppo tre, lo script deve quindi disabilitare la scelta due sia nel gruppo uno sia nel gruppo due. Se l'utente seleziona la terza scelta nel gruppo due, dovrebbe quindi abilitare solo la scelta 1 nel gruppo 1 e così via.

Qualsiasi aiuto sarebbe molto, molto apprezzato. Vorrei pubblicare il jQuery che stavo tentando di scrivere per risolvere questo problema, ma non penso di averlo fatto molto bene e mi piacerebbe qualsiasi aiuto che ci passi attraverso. Grazie!

Answer 1

Saltavo le classi speciali.

$("input[type=radio]").click(function() { 
    $("input[type=radio][value=" + $(this).val() + "]").attr("disabled", "disabled"); 
    $(this).removeAttr("disabled"); 
}); 

A seconda delle esigenze, potrebbe non essere necessaria l'ultima riga, riattiva solo la radio corrente. Anche il tuo html non ha i nomi per i tuoi pulsanti di opzione.

Answer 2

In primo luogo, non si dispone di ID duplicati nel codice.

Vorrei rendere tutti gli ID univoci e quindi assegnare alle radiobox un nome di classe, ad esempio class="choice_three".

Puoi dare al tuo div un ID, selezionando da un ID è più veloce della classe, quindi ad esempio id="group_three".

Poi per selezionare un pulsante di opzione, è sufficiente utilizzare il seguente codice:

$("#group_three .choice_three").attr("disabled", "disabled"); 

nota, lo spazio tra #group_three e .choice_three è importante.

O ancora più veloce:

$("#group_three input:radio.choice_three").attr("disabled", "disabled"); 

Un'altra cosa da notare pure, l'etichetta "per" dovrebbe essere per il pulsante di scelta, non il div.

Answer 3

Se si aggiungono classi speial alle stesse scelte, ad es. class = "choice_one", e quindi nel vostro gestore di eventi è possibile:

if ($this).hasClass("choice_one") { $(".choice_one").attr("disabled", "disabled"); } 
else if ($this).hasClass("choice_two") { ... } 
... 

Answer 4

si potrebbe essere in grado di usare qualcosa di simile (non ho ancora testato questo, è solo per ottenere la palla a rotazione ...)

L'idea è: ogni volta che si fa clic su una radio, disabilitare tutte le radio in tutti i gruppi con quel valore, ad eccezione di quello appena cliccato.

$(document).ready(function() { 
    $("input[type=radio]").click(function() { 
     var val = $(this).val(); 
     var $all_radios = $("input[type=radio]").filter("[value=" + val + "]"); 
     $all_radios.not($(this)).attr('disabled', 'disabled'); 
     return true; 
    }); 
}); 

Answer 5

Fatto & testati, ecco la jQuery:

$(document).ready(function() { 
    $('input:radio').click(function() { 
     //reset all the radios 
     $('input:radio').removeAttr('disabled'); 
     if($(this).is(':checked')) { 
      var val = $(this).val(); 
      //disable all the ones with the same value 
      $('input:radio').each(function() { 
       if(val == $(this).val()) { 
        $(this).attr('disabled',true); 
       } 
      }); 
      //let's not disable the one we have just clicked on 
      $(this).removeAttr('disabled'); 
     } 
    }); 
}); 

e il markup modded:

<p> 
    <label for="group_one">Group One</label> 
</p> 
<p> 
    <div class="group_one"> 
    <div> 
     <label for="group_one_choice_one">Choice One</label> 
     <br /> 
     <input checked="checked" name="group_one" type="radio" value="1" /> 
     <br /> 
    </div> 
    <div> 
     <label for="group_one_choice_two">Choice Two</label> 
     <br /> 
     <input name="group_one" type="radio" value="2" /> 
     <br /> 
    </div> 
    <div> 
     <label for="group_one_choice_three">Choice Three</label> 
     <br /> 
     <input name="group_one" type="radio" value="3"/ > 
     <br /> 
    </div> 
    </div> 
</p> 
<p> 
    <label for="group_two">Group Two</label> 
</p> 
<p> 
    <div class="group_two"> 
    <div> 
     <label for="group_two_choice_one">Choice One</label> 
     <br /> 
     <input checked="checked" name="group_two" type="radio" value="1" /> 
     <br /> 
    </div> 
    <div> 
     <label for="group_two_choice_two">Choice Two</label> 
     <br /> 
     <input name="group_two" type="radio" value="2" /> 
     <br /> 
    </div> 
    <div> 
     <label for="group_two_choice_three">Choice Three</label> 
     <br /> 
     <input name="group_two" type="radio" value="3"/ > 
     <br /> 
    </div> 
    </div> 
</p> 
<p> 
    <label for="group_three">Group Three</label> 
</p> 
<p> 
    <div class="group_three"> 
    <div> 
     <label for="group_three_choice_one">Choice One</label> 
     <br /> 
     <input checked="checked" name="group_three" type="radio" value="1" /> 
     <br /> 
    </div> 
    <div> 
     <label for="group_three_choice_two">Choice Two</label> 
     <br /> 
     <input name="group_three" type="radio" value="2" /> 
     <br /> 
    </div> 
    <div> 
     <label for="group_three_choice_three">Choice Three</label> 
     <br /> 
     <input name="choice_three" type="radio" value="3"/ > 
     <br /> 
    </div> 
    </div> 
</p> 

Modifiche al markup:

• sono liberato delle interne DIVID s .
• Modificato gli attributi NAME, quindi si comportano come i pulsanti di opzione .