Activer une liste déroulante actuellement désactivée lorsque vous cliquez sur la liste déroulante

Question

Voici le scénario: J'ai deux boutons radio, 1) pour un client normal et 2) pour les partenaires qui ont également un contrôle déroulant de sorte que l'un des X nombre de partenaires peut être sélectionné. Lorsqu'un type de client est sélectionné, l'autre section devient sombre avec la désactivation normale des contrôles et l'application de CSS pour obtenir ce look désactivé. Ce que je cherche à faire est que lorsque le bouton radio, étiquette à côté de lui et, dans le cas de la section partenaire, la liste déroulante est cliqué est cette section particulière devrait être activée. Ce que je trouve est que quand le 'Label pour' est enroulé autour du bouton radio et de la liste déroulante, qui a son attribut disabled = true via jQuery lorsque la section opposée est activée, ce qui clique sur la liste déroulante doesn ' t activer cette section. De plus, l'événement click n'est pas déclenché pour la liste déroulante, ce que je suppose être correct puisque son état désactivé est défini sur true. J'ai essayé d'utiliser à la fois l'événement click pour les boutons radio et les étiquettes, mais la liste déroulante désactivée semble être un événement traitant un trou noir. J'utilise jQuery et Asp.net MVC mais je suis convaincu de la pertinence de, au moins, MVC dans ce cas. Le bouton radio et l'événement de clic d'étiquette se déclencheront dans la liste déroulante désactivée dans IE7, mais pas dans Firefox3 ni dans les navigateurs Chrome.

Des idées?

<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

Vous avez absolument raison, la propriété désactivée transforme la boîte de sélection en un trou noir. Même le navigateur normal, cliquez avec le bouton droit sur le menu contextuel de Firefox ne fonctionne pas dessus.

Vous avez l'intention de réactiver la boîte de sélection lorsque vous cliquez sur son conteneur d'étiquettes, l'état désactivé est-il réservé à l'apparence? .. Si oui, que si vous faites la boîte de sélection juste look désactivé en utilisant 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> 

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

Semble fonctionne bien dans FF3 & Je devine que les navigateurs Chrome aussi. Malheureusement dans IE7 (j'aurais aimé avoir un nickel à chaque fois que je le disais), la boîte de sélection perd instantanément la priorité si on clique directement dessus ... quelque chose d'interne à IE, lié au filtre d'opacité changeant sur l'objet select, semble-t-il. Barre latérale ... en ignorant votre problème de boîte de sélection "désactivée" pour un instant: même si vous utilisez la syntaxe "for = ..." sur vos étiquettes, je ne pense pas qu'il soit correct de contenir plusieurs éléments de formulaire dans une seule étiquette. Si c'est valide, peut-être que ce n'est pas une bonne idée. L'idée est de cliquer n'importe où dans l'étiquette pour mettre l'accent sur l'élément de formulaire lié, 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 gagner en focus. FF3 gère cela correctement - si vous essayez votre code sans désactiver la boîte de sélection, vous verrez le problème.

Espérons que ça aide. La superposition div proposée par le premier poster pourrait être le chemin à parcourir. J'ai pensé que j'essaierais juste d'utiliser une solution alternative en utilisant le même code HTML, ajusté pour corriger ce problème d'élément multiple par forme.

Answer 2

Essayez le positionnement d'un div transparent au-dessus des éléments de formulaire (cela ne devrait pas être trop dur avec jQuery), et faire que div capturer votre clic de souris.

Answer 3

Voici la solution que j'ai utilisée here. Fondamentalement, en cliquant sur un wrapper autour de les contrôles provoque la boîte de sélection pour enabel et désactiver. Puisque vos étiquettes englobent tout, aucune balise supplémentaire n'a été nécessaire (autre 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> 

Espérons que cela fera l'affaire.