jQuery disabilita le opzioni SELECT in base alla radio selezionata (serve il supporto per tutti i browser)

Va bene avere un po ‘di problemi qui, volevo disabilitare alcune delle opzioni quando si seleziona una radio. Quando viene selezionato ABC, disabilita le opzioni 1,2 e 3, ecc …

$("input:radio[@name='abc123']").click(function() { if($(this).val() == 'abc') { // Disable $("'theOptions' option[value='1']").attr("disabled","disabled"); $("'theOptions' option[value='2']").attr("disabled","disabled"); $("'theOptions' option[value='3']").attr("disabled","disabled"); } else { // Disbale abc's } }); ABC:  123:   1 2 3 a b c  

Non funziona nessuna idea?

AGGIORNARE:

Ok, ho abilitato / disabilitato il funzionamento, ma è sorto un nuovo problema. Le opzioni disabilitate per la mia casella di selezione funzionano solo in FF e IE8. Ho testato IE6 e i disabili non funzionano. Ho provato a usare hide () e show () senza fortuna. fondamentalmente ho bisogno di hide / disabilitare / rimuovere le opzioni (per tutti i browser) ed essere in grado di aggiungerle se è selezionata l’altra opzione radio e viceversa.

CONCLUSIONE:

Grazie per tutte le soluzioni, la maggior parte di loro ha risposto alla mia domanda originale. Molte PROPOSTE a tutti 🙂

Il modo corretto per ottenere la funzionalità che desideri è solo rimuovere le opzioni. Come hai scoperto nel modo più duro, la distriggerszione delle singole opzioni non è supportata particolarmente bene tra i browser. Mi sono appena svegliato e avevo voglia di programmare qualcosa, quindi ho montato un piccolo plug-in per filtrare facilmente una selezione in base all’attributo ID della radio selezionato. Anche se il resto delle soluzioni porterà a termine il lavoro, se hai intenzione di farlo nella tua app, questo dovrebbe aiutare. Se no, allora immagino che sia per chiunque altro che inciampa su questo. Ecco il codice del plugin che potresti hide da qualche parte:

 jQuery.fn.filterOn = function(radio, values) { return this.each(function() { var select = this; var options = []; $(select).find('option').each(function() { options.push({value: $(this).val(), text: $(this).text()}); }); $(select).data('options', options); $(radio).click(function() { var options = $(select).empty().data('options'); var haystack = values[$(this).attr('id')]; $.each(options, function(i) { var option = options[i]; if($.inArray(option.value, haystack) !== -1) { $(select).append( $(' 

Ed ecco come usarlo:

 $(function() { $('#theOptions').filterOn('input:radio[name=abc123]', { 'abc': ['a','b','c'], '123': ['1','2','3'] }); }); 

Il primo argomento è un selettore per il gruppo radio, il secondo un dizionario in cui le chiavi sono l’ID radio da abbinare e il valore è un array di ciò che i valori delle opzioni selezionate dovrebbero rimanere. C’è un sacco di cose che potrebbero essere fatte per astrarre ulteriormente questo, fammi sapere se sei interessato e potrei certamente farlo.

Ecco una demo di esso in azione .

EDIT : Inoltre, ha dimenticato di aggiungere, secondo la documentazione di jQuery:

In jQuery 1.3 [@attr] sono stati rimossi i selettori di stile (precedentemente deprecati in jQuery 1.2). Basta rimuovere il simbolo ‘@’ dai selettori per farli funzionare di nuovo.

Vuoi qualcosa come questo – Esempio di codice qui

 $(function() { $("input:radio[@name='abc123']").click(function() { if($(this).attr('id') == 'abc') { // Disable 123 and Enable abc $("#theOptions option[value='1']").attr("disabled","disabled"); $("#theOptions option[value='2']").attr("disabled","disabled"); $("#theOptions option[value='3']").attr("disabled","disabled"); $("#theOptions option[value='a']").attr("selected","selected"); $("#theOptions option[value='a']").attr("disabled",""); $("#theOptions option[value='b']").attr("disabled",""); $("#theOptions option[value='c']").attr("disabled",""); } else { // Disable abc's and Enable 123 $("#theOptions option[value='a']").attr("disabled","disabled"); $("#theOptions option[value='b']").attr("disabled","disabled"); $("#theOptions option[value='c']").attr("disabled","disabled"); $("#theOptions option[value='1']").attr("selected","selected"); $("#theOptions option[value='1']").attr("disabled",""); $("#theOptions option[value='2']").attr("disabled",""); $("#theOptions option[value='3']").attr("disabled",""); } }); }); 

MODIFICARE:

Versione migliorata del codice, utilizzando l’espressione regolare per filtrare le opzioni in base ai valori delle opzioni. Esempio di lavoro qui . È ansible modificare l’esempio aggiungendo /edit l’URL

 $(function() { $("input:radio[@name='abc123']").click(function() { // get the id of the selected radio var radio = $(this).attr('id'); // set variables based on value of radio var regexDisabled = radio == 'abc' ? /[1-3]/ : /[ac]/; var regexEnabled = radio == 'abc' ? /[ac]/ : /[1-3]/; var selection = radio == 'abc' ? 'a' : 1; // select all option elements who are children of id #theOptions $("#theOptions option") // filter the option elements to only those we want to disable .filter( function() { return this.value.match(regexDisabled);}) // disable them .attr("disabled","disabled") // return to the previous wrapped set ie all option elements .end() // and filter to those option elements we want to enable .filter( function() { return this.value.match(regexEnabled);}) // enable them .attr("disabled",""); // change the selected option element in the dropdown $("#theOptions option[value='" + selection + "']").attr("selected","selected"); }); }); 

MODIFICA 2:

Dal momento che l’attributo disabilitato non sembra funzionare in modo affidabile tra i browser, penso che la tua unica opzione sia rimuovere gli elementi opzione non necessari quando viene selezionato un pulsante radio. Esempio di lavoro qui

  $(function() { $("input:radio[@name='abc123']").click(function() { // store the option elements in an array var options = []; options[0] = ''; options[1] = ''; options[2] = ''; options[3] = ''; options[4] = ''; options[5] = ''; var radio = $(this).attr('id'); var regexEnabled = radio == 'abc' ? /[ac]/ : /[1-3]/; // set the option elements in #theOptions to those that match the regular expression $("#theOptions").html( $(options.join('')) // filter the option elements to only those we want to include in the dropdown .filter( function() { return this.value.match(regexEnabled);}) ); }); }); 

o anche

  $(function() { // get the child elements of the dropdown when the DOM has loaded var options = $("#theOptions").children('option'); $("input:radio[@name='abc123']").click(function() { var radio = $(this).attr('id'); var regexEnabled = radio == 'abc' ? /[ac]/ : /[1-3]/; // set the option elements in #theOptions to those that match the regular expression $("#theOptions").html( $(options) // filter the option elements to only those we want to include in the dropdown .filter( function() { return this.value.match(regexEnabled);}) ); }); }); 

il primo problema è con

 $(this).val() 

sostituirlo con

 $(this).attr('id') == 'abc' 

allora questo non funzionerà

 $("'theOptions'..") 

uso

 $("#theOptions option[value='1']").attr('disabled','disabled') //to disable $("#theOptions option[value='a']").attr('disabled','') //to ENABLE 

quale browser stai usando? Non l’ho mai usato prima, ma sembra non essere supportato in IE prima di IE8. Vedi questo link per maggiori informazioni:

http://www.w3schools.com/TAGS/att_option_disabled.asp

Il tuo selettore è sbagliato. Invece di

 $("'theOptions' option[value='1']") 

dovresti usare

 $("#theOptions > option[value='1']") 

Vedi anche la documentazione sui selettori jQuery. E dai un’occhiata al suggerimento di aman.tur.

 $(":radio[name=abc123]").click(function() { var $options = $("#theOptions") var toggle = ($(this).val() == 'abc') ? true : false; $("[value=1],[value=2],[value=3]", $options).attr("disabled", toggle); $("[value=a],[value=b],[value=c]", $options).attr("disabled", !toggle); }); 

Se si desidera disabilitare alcune opzioni, il codice riportato di seguito dovrebbe funzionare

 $("input:radio[name='abc123']").click(function() { var value = $(this).val(); $("option[value='1'], option[value='2'], option[value='3']", "#theOptions").each(function(){ this.disabled = value == 'abc'; }); $("option[value='a'], option[value='b'], option[value='c']", "#theOptions").each(function(){ this.disabled = value == '123'; }) }); 

e i pulsanti radio

 ABC:  123:  

Se si desidera rimuovere le opzioni dall’elenco di selezione, utilizzare questo codice

 $(function(){ var options = null; $("input:radio[name='abc123']").click(function() { var value = $(this).val(); if(options != null)options.appendTo('#theOptions'); if(value == 'abc' ) options = $("option[value='1'], option[value='2'], option[value='3']", "#theOptions").remove(); else if(value == '123') options = $("option[value='a'], option[value='b'], option[value='c']", "#theOptions").remove(); }); }); 

BTW. il mio codice utilizza l’attuale versione stabile di jQuery (1.3.2). Se si utilizza la versione precedente, sarà necessario modificare i selettori dell’attributo con la vecchia syntax.

opzione [valore = ‘1’] all’opzione [@ valore = ‘1’]

basta correggere il selettore $("'theOptions' option[value='1']") a $("#theOptions option[value='1']") e tutto funzionerà bene