Enable a Currently Disabled Dropdown List when Clicking the Dropdown List

Question

Here is the scenario: I have two radio buttons, 1) for a normal customers and 2) for business partners which also has a drop down control so that one of X number of business partners can be selected. When one customer type is selected the other section goes dark with the normal disabling of controls and applying CSS to get that disabled look.

What I'm striving for is that when the Radio Button, Label next to it and, in the case of the Business partner section, the drop down list are clicked is that particular section should become enabled. What I'm finding is that the when the 'Label for' is wrapped around the radio button and drop down list, which has its attribute disabled=true via jQuery when the opposite section is enabled, that actually clicking on the drop list doesn't enable that section. Also the click event is not fired for the drop list which I assume is correct since its disabled state is set to true. I've tried using both the click event for the radio buttons and the labels but the disabled dropdown list seems to be an event handling black hole. I am using jQuery and Asp.net MVC but I'm convinced of the relevance of, at least, MVC in this case.

The radio button and label click event will fire through the disabled dropdownlist in IE7 but not Firefox3 nor Chrome browsers.

Any ideas?

<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

Try positioning a transparent div on top of the form elements (this shouldn't be too hard with jQuery), and make that div capture your mouse click.

Answer 2

You're absolutely right, the disabled property turns the select box into a black hole. Even the normal browser right-click Firefox context menu doesn't work over it.

Sounds like your intention is to re-enable the select box when its label container is clicked, so is the disabled state just for appearance's sake? .. If so, what if you made the select box just look disabled using CSS opacity?

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

Test page here: http://www.carcomplaints.com/test/motowilliams.html

Seems to works okay in FF3 & I'm guessing Chrome browsers too. Unfortunately in IE7 (wish I had a nickel for every time I said that), the select box loses focus instantly if you click it directly.. something internal to IE, related to the opacity filter changing on the select object, it seems.

Sidebar ... disregarding your "disabled" select box issue for a moment: even though you use the "for=..." syntax on your labels, I don't think it's valid to have multiple form elements contained within a single label tag. If it's valid, maybe just not a good idea. The whole idea is clicking anywhere within the label gives focus to the linked form element, so in theory, your select box (which is the 2nd form element within a label) should never gain focus. FF3 handles this correctly - if you try your code without disabling the select box, you'll see the problem.

Hope that helps. The div overlay suggested by the first poster might be the way to go. I thought I'd just try for an alternate solution using your same HTML code, adjusted to fix that multiple-form-element-per-label problem.

Answer 3

Here's the solution I used here. Basically, clicking on a wrapper around the controls causes the select box to enabel and disable. Since your labels encompass everything, no extra tags were needed (other than 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>

Hopefully, that'll do the trick.