Abilitare un elenco a discesa attualmente disabilitato quando si fa clic sull'elenco a discesa

Question

Ecco lo scenario: ho due pulsanti di opzione, 1) per i clienti normali e 2) per i partner commerciali che hanno anche un controllo a discesa in modo che uno del numero X di partner commerciali possa essere selezionato. Quando viene selezionato un tipo di cliente, l'altra sezione si oscura con la normale disabilitazione dei controlli e l'applicazione dei CSS per ottenere quell'aspetto disabilitato.

Ciò a cui mi sto impegnando è che quando si fa clic sul pulsante di opzione, Etichetta accanto ad esso e, nel caso della sezione Business partner, viene visualizzato l'elenco a discesa, è necessario abilitare quella particolare sezione. Quello che sto scoprendo è che quando il 'Etichetta per' è racchiuso tra il pulsante di opzione e l'elenco a discesa, che ha il suo attributo disabilitato = vero tramite jQuery quando è abilitata la sezione opposta, che effettivamente facendo clic sull'elenco a discesa non lo fa ' abilitare quella sezione. Inoltre, l'evento click non viene generato per l'elenco a discesa che presumo sia corretto poiché il suo stato disabilitato è impostato su true. Ho provato a utilizzare sia l'evento click per i pulsanti di opzione che le etichette, ma l'elenco a discesa disabilitato sembra essere un evento che gestisce il buco nero. Sto usando jQuery e Asp.net MVC ma sono convinto della rilevanza, almeno, MVC in questo caso.

Il pulsante di opzione e l'evento clic etichetta verranno attivati ??nell'elenco a discesa disabilitato in IE7 ma non nei browser Firefox3 e Chrome.

Qualche idea?

<label for="CustomerRadio">
 <input id="CustomerRadio" checked="checked" 
        name="usertype" type="radio"
        value="Customer" />Customer
</label> 

<label  for="BusinessPartnerRadio">
  <input id="BusinessPartnerRadio"
         name="usertype" type="radio"
         value="BusinessPartner" />Business Partner
    <select id="businessPartnerType" name="businessPartnerType">
      <option selected="selected" value="Builder">Builder</option>
      <option value="InstallDealer">Install Dealer</option>
      <option value="RepairDealer">Repair Dealer</option>
    </select>
</label>

Answer 1

Hai perfettamente ragione, la proprietà disabilitata trasforma la casella di selezione in un buco nero. Anche il normale menu contestuale di Firefox con il tasto destro del mouse non funziona su di esso.

Sembra che la tua intenzione sia quella di riattivare la casella di selezione quando si fa clic sul relativo contenitore di etichette, quindi lo stato disabilitato è solo per motivi di aspetto? .. In tal caso, cosa succede se la casella di selezione viene cerca disabilitata utilizzando l'opacità CSS?

<style type="text/css">
  label.disabled select { opacity: 0.6; filter: alpha(opacity=60); }
</style>

<script type="text/javascript">
  $(function() {
    $('div.formdiv').bind('click',function() {
      $('label.disabled',this).removeClass('disabled');
      $('input:radio',this).attr('checked',true);
      $('div.formdiv').not(this).find('label').addClass('disabled').find('select').attr('selectedIndex',0);
    }).find('label').addClass('disabled');
  });
</script>

<div class="formdiv">
 <label for="CustomerRadio">
  <input id="CustomerRadio" checked="checked" name="usertype" type="radio" value="Customer" />Customer
 </label>
</div>

<div class="formdiv">
 <label for="BusinessPartnerRadio">
  <input id="BusinessPartnerRadio" name="usertype" type="radio" value="BusinessPartner" />Business Partner
 </label>
 <label>
  <select id="businessPartnerType" name="businessPartnerType">
   <option selected="selected" value="Builder">Builder</option>
   <option value="InstallDealer">Install Dealer</option>
   <option value="RepairDealer">Repair Dealer</option>
  </select>
 </label>
</div>

Pagina di test qui: http://www.carcomplaints.com/test/motowilliams.html

Sembra funzionare bene in FF3 & amp; Immagino anche i browser Chrome. Sfortunatamente in IE7 (vorrei avere un nickel per ogni volta che lo dicevo), la casella di selezione perde la messa a fuoco istantaneamente se fai clic direttamente .. qualcosa di interno a IE, correlato al filtro di opacità che cambia sull'oggetto selezionato, sembra.

Barra laterale ... ignorando il tuo " disabilitato " seleziona il numero della scatola per un momento: anche se usi " for = ... " sintassi sulle etichette, non penso che sia valido avere più elementi del modulo contenuti in un singolo tag etichetta. Se è valido, forse non è una buona idea. L'intera idea che si fa clic in qualsiasi punto all'interno dell'etichetta si concentra sull'elemento del modulo collegato, quindi in teoria la casella selezionata (che è il 2 ° elemento del modulo all'interno di un'etichetta) non dovrebbe mai focalizzarsi. FF3 lo gestisce correttamente: se provi il tuo codice senza disabilitare la casella di selezione, vedrai il problema.

Spero che sia d'aiuto. La sovrapposizione div suggerita dal primo poster potrebbe essere la strada da percorrere. Ho pensato di provare una soluzione alternativa usando il tuo stesso codice HTML, adattato per risolvere quel problema di elemento multiforme per etichetta.

Answer 2

Prova a posizionare un div trasparente sopra gli elementi del modulo (questo non dovrebbe essere troppo difficile con jQuery) e fai in modo che il div catturi il tuo clic del mouse.

Answer 3

Ecco la soluzione che ho usato qui . Fondamentalmente, facendo clic su un wrapper around i controlli causano l'abilitazione e la disabilitazione della casella di selezione. Dato che le tue etichette racchiudono tutto, non sono necessari tag aggiuntivi (tranne lo script).

<script type="text/javascript">
function setCustomer(Customer)
{
    //disable the business controls
    document.getElementById('BusinessPartnerType').disabled = Customer;

    //set the radio button selection
    document.getElementById('cradio').checked = Customer;
    document.getElementById('bradio').checked = !Customer;
}
</script>

<label for="CustomerRadio" id="CustomerLabel" onclick="setCustomer(true);">
    <input id="CustomerRadio" checked="checked" name="usertype" type="radio" value="Customer" id="cradio" />
    Customer
</label> 

<label for="BusinessPartnerRadio" onclick="setCustomer(false);">
    <input id="BusinessPartnerRadio" name="usertype" type="radio" value="BusinessPartner" id="bradio" />
    Business Partner
    <select id="businessPartnerType" name="businessPartnerType" id="businessPartnerType">
        <option selected="selected" value="Builder">Builder</option>
        <option value="InstallDealer">Install Dealer</option>
        <option value="RepairDealer">Repair Dealer</option>
    </select>
</label>

Speriamo che faccia il trucco.