Question

Okay abbiamo un po 'di problemi qui, ho voluto disabilitare alcune delle opzioni quando si seleziona una radio. Quando si seleziona ABC disabilitare i 1,2 & 3 opzioni, 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: <input type="radio" name="abc123" id="abc"/> 
123: <input type="radio" name="abc123" id="123"/> 

<select id="theOptions"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="a">a</option> 
    <option value="b">b</option> 
    <option value="c">c</option> 
</select> 

Non funziona tutte le idee?

UPDATE:

Ok ho avuto l'abilitazione/disabilitazione di lavoro, ma un nuovo problema è sorto. 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 nascondere/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 tutti loro ha risposto alla mia domanda iniziale. Molto PROPS a tutti :)

Answer 1

Il modo corretto per ottenere la funzionalità che si desidera è solo quello di rimuovere le opzioni. Come hai scoperto nel modo più duro, la disattivazione 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 è possibile mettere 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(
        $('<option>').text(option.text).val(option.value) 
        ); 
       } 
      }); 
     });    
    }); 
}; 

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 il 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.

Here is a demo of it in action.

EDIT: Inoltre, dimenticato di aggiungere, secondo il jQuery documentation:

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

Answer 2

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

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

Answer 3

vostro selettore è sbagliato. Invece di

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

si dovrebbe usare

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

Vedere anche il jQuery selectors documentation. E dai uno sguardo allo suggestion di aman.tur.

Answer 4

il primo problema è con

$(this).val() 

sostituirla 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 

Answer 5

Se si desidera disattivare alcune opzioni, che il codice qui sotto 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'; 
    }) 
}); 

ei pulsanti-radio

ABC: <input type="radio" name="abc123" value="abc" id="abc"/> 
123: <input type="radio" name="abc123" value="123" id="123"/> 

Se si desidera rimuovere le opzioni da selezionare Elenco, di 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 sintassi.

opzione [valore = '1'] per l'opzione [@ value = '1']

Answer 6

si desidera qualcosa di simile - Example Code here

$(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",""); 

    }  
}); 

}); 

EDIT:

Versione migliorata del codice, utilizzando l'espressione regolare per filtrare le opzioni in base ai valori delle opzioni. Working example here. È possibile modificare l'esempio aggiungendo /edit all'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]/ : /[a-c]/;  
     var regexEnabled = radio == 'abc' ? /[a-c]/ : /[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 i.e. 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"); 

    }); 

}); 

EDIT 2:

Dal momento che l'attributo disabled non sembra funzionare in modo affidabile tutti i browser, credo che l'unica opzione è quella di rimuovere il elementi di opzione non necessari quando è selezionato un pulsante di opzione. Working Example here

$(function() { 

     $("input:radio[@name='abc123']").click(function() { 

      // store the option elements in an array 
      var options = []; 
      options[0] = '<option value="1">1</option>'; 
      options[1] = '<option value="2">2</option>'; 
      options[2] = '<option value="3">3</option>'; 
      options[3] = '<option value="a">a</option>'; 
      options[4] = '<option value="b">b</option>'; 
      options[5] = '<option value="c">c</option>'; 


      var radio = $(this).attr('id'); 
      var regexEnabled = radio == 'abc' ? /[a-c]/ : /[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' ? /[a-c]/ : /[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);}) 
      ); 

     }); 
    }); 

Answer 7

$(":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); 
}); 

Answer 8

solo risolvere il selettore $("'theOptions' option[value='1']") per $("#theOptions option[value='1']") e tutto funzionerà bene