Aktivieren Sie eine derzeit deaktivierte Dropdown-Liste, wenn Sie auf die Dropdown-Liste klicken

Question

Hier ist das Szenario: Ich habe zwei Radiobuttons, 1) für einen normalen Kunden und 2) für Geschäftspartner, die auch eine Dropdown-Steuerelement hat X Anzahl der Geschäftspartner kann ausgewählt werden. Wenn ein Kundentyp ausgewählt wird, wird der andere Abschnitt dunkel, mit der normalen Deaktivierung von Steuerelementen und dem Anwenden von CSS, um dieses deaktivierte Aussehen zu erhalten.

Was ich anstrebe, ist, dass wenn der Radio Button, das Label daneben und im Falle des Business-Partners die Dropdown-Liste angeklickt wird, dieser bestimmte Bereich aktiviert werden soll. Was ich finde ist, dass das, wenn das 'Label für' um den Radiobutton und die Drop-Down-Liste gewickelt ist, deren Attribut deaktiviert ist = true über jQuery, wenn der gegenüberliegende Abschnitt aktiviert ist, das tatsächlich auf die Drop-Liste klickt. t Aktivieren Sie diesen Abschnitt. Außerdem wird das Klickereignis nicht für die Dropdown-Liste ausgelöst, die ich für korrekt halte, da der deaktivierte Status auf "true" gesetzt ist. Ich habe versucht, sowohl das Click-Ereignis für die Radio-Buttons und die Etiketten zu verwenden, aber die deaktivierte Dropdown-Liste scheint ein Ereignis zu sein, das ein schwarzes Loch behandelt. Ich benutze jQuery und Asp.net MVC, aber ich bin von der Relevanz von zumindest MVC in diesem Fall überzeugt.

Das Radio Button- und Label-Click-Ereignis wird über die deaktivierte Dropdown-Liste in IE7, aber nicht in Firefox3 oder Chrome-Browser ausgelöst.

Irgendwelche Ideen?

<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

Sie haben absolut Recht, die deaktivierte Eigenschaft verwandelt die Auswahlbox in ein schwarzes Loch. Selbst der normale Browser mit der rechten Maustaste auf Firefox Kontextmenü funktioniert nicht darüber.

Klingt wie Ihre Absicht ist, die Auswahlbox wieder zu aktivieren, wenn ihr Etikettencontainer angeklickt wird, also ist der deaktivierte Zustand nur aus Gründen des Aussehens? .. Wenn ja, was ist, wenn Sie die Auswahlbox nur Look deaktiviert mit CSS-Deckkraft?

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

Testseite hier: http://www.carcomplaints.com/test/motowilliams.html

Scheint arbeitet in Ordnung in FF3 & ich Chrome-Browser zu erraten. Leider in IE7 (ich wünschte, ich hätte ein Nickel für jedes Mal, dass ich das sagte), die Auswahlbox verliert sofort den Fokus, wenn Sie direkt darauf klicken .. etwas innerhalb IE, in Bezug auf die Opazität Filter ändert sich auf dem ausgewählten Objekt, so scheint es.

Sidebar ... ignorieren Sie Ihre "deaktiviert" -Auswahlbox Problem für einen Moment: Obwohl Sie die "for = ..." -Syntax auf Ihre Etiketten verwenden, glaube ich nicht, dass es mehrere Formularelemente enthalten innerhalb eines einzelnen Etiketten-Tags. Wenn es gültig ist, vielleicht keine gute Idee. Die ganze Idee besteht darin, irgendwo innerhalb des Labels zu klicken, um den Fokus auf das verknüpfte Formularelement zu legen. In der Theorie sollte Ihr Auswahlfeld (welches das zweite Formularelement in einem Label ist) niemals den Fokus erhalten. FF3 behandelt dies richtig - wenn Sie Ihren Code versuchen, ohne das Auswahlfeld zu deaktivieren, sehen Sie das Problem.

Hoffe, dass hilft. Die vom ersten Poster vorgeschlagene div-Überlagerung könnte der richtige Weg sein. Ich dachte, ich würde einfach eine alternative Lösung mit demselben HTML-Code versuchen, der angepasst wurde, um das Multiple-Form-Element-pro-Label-Problem zu beheben.

Answer 2

Versuchen Sie, eine transparente div auf der Oberseite der Formelemente zu positionieren, und macht, dass div erfassen Sie mit der Maus klicken (dies ist nicht zu hart mit jQuery sein soll).

Answer 3

Hier ist die Lösung, die ich here verwendet. Grundsätzlich klicken Sie auf einen Wrapper um die Steuerelemente bewirkt, dass die Auswahlbox enabel und deaktivieren. Da Ihre Labels alles umfassen, wurden keine zusätzlichen Tags benötigt (außer Skript).

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

Hoffentlich wird das den Trick tun.