Activer un Actuellement Désactivé Liste Déroulante en Cliquant sur la Liste Déroulante

Vous avez tout à fait raison, les handicapés de la propriété tourne la boîte de sélection dans un trou noir. Même le navigateur, cliquez-droit sur Firefox menu contextuel ne fonctionne pas sur elle.

Semble que votre intention est de ré-activer la boîte de sélection lors de son étiquette de conteneur est cliqué, donc, est à l'état désactivé juste pour l'apparence du souci? .. Si oui, que si vous faites la boîte de sélection juste look désactivé à l'aide de CSS opacité?

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

Page de Test ici:
http://www.carcomplaints.com/test/motowilliams.html

Semble fonctionne bien dans FF3 & je devine que les navigateurs google Chrome. Malheureusement, dans IE7 (j'avais un nickel pour chaque fois que je l'ai dit), la boîte de sélection perd le focus instantanément si vous cliquez directement.. quelque chose d'interne à IE, liées à l'opacité de remplacement des filtres sur l'objet à sélectionner, il me semble.

Barre latérale ... malgré vos "personnes handicapées", sélectionnez boîte à question pour un moment: même si vous utilisez le "for=..." syntaxe sur vos étiquettes, je ne pense pas que c'est valable pour plusieurs éléments de formulaire dans une seule étiquette. Si elle est valide, peut-être tout simplement pas une bonne idée. L'idée est de cliquer n'importe où à l'intérieur de l'étiquette donne le focus à la forme liée de l'élément, donc, en théorie, votre boîte de sélection (qui est le 2ème élément de formulaire dans une étiquette) ne devrait jamais obtenir le focus. FF3 gère correctement - si vous essayez de votre code sans désactiver la case "sélectionner", vous verrez le problème.

Espère que ça aide. La div superposition suggérée par la première affiche pourrait être le chemin à parcourir. Je pensais juste essayer pour une solution de rechange à l'aide de votre code HTML, ajusté pour corriger que de multiples-forme de l'élément-par-étiquette problème.

OriginalL'auteur Wick

Voici la solution que j'ai utilisée ici.
Fondamentalement, en cliquant sur un wrapper autour de les contrôles provoque la zone de sélection pour enabel et désactiver. Depuis des étiquettes à tout embrasser, pas de balises supplémentaires étaient nécessaires (autres que le 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>

Je l'espère, que va faire l'affaire.

OriginalL'auteur Eric