Enable drop-down list currently disabled when clicking on drop-down list

Question

Here is the scenario: I have two switches: 1) for regular customers and 2) for business partners who also have a drop-down control, so that one of the X number of business partners can be selected. When one type of client is selected, the other section becomes dark when controls are normally disabled and CSS is applied to get this disabled view.

What I'm aiming for is that when you click the Radio button, the Label next to it and, in the case of the Business Partner section, the drop-down list is the one that should activate a particular section. What I find is that when the "Shortcut for" is wrapped around a switch and a drop-down list that has its attribute disabled = true via jQuery, when the opposite section is turned on, by actually clicking on the jump list, t turn on this section. In addition, the click event is not fired for the drop-down list, which, I believe, is correct, since its disabled state is set to true. I tried using both the click event for the radio buttons and shortcuts, but the dropdown list seems to be black hole event handling. I use jQuery and ASP.NET MVC, but I am convinced of the significance of at least MVC in this case.

An event with a click and a shortcut with a shortcut is triggered through a drop-down list of disabled in IE7, but not Firefox3 and 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

You are absolutely right, a disabled property turns the selection field into a black hole. Even the normal Firefox right-click context menu does not work on it.

It looks like your intention is to re-enable the selection box when you click on the shortcut container, just like the disabled state is just for appearance? .. If so, then what if you made the selection box just 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

Everything seems to work fine in FF3, and I guess Chrome browsers. Unfortunately, in IE7 (I wish I had nickel every time I said this), the selection window loses focus instantly if you press it directly .. something internal in IE related to the opacity filter changing on the selected object. It seems.

Sidebar ... regardless of your problem with the selection turned off for a while: even if you use the "for = ..." syntax on your labels, I don’t think it’s right to use several form elements contained in one label label . If it really is, maybe just not a good idea. The whole idea is to click anywhere in the label, giving focus to the connected form element, so theoretically your selection box (which is the second form element inside the label) should never focus. FF3 handles this correctly - if you try your code without disabling the selection box, you will see a problem.

Hope this helps. The overlay div proposed by the first poster may be a way. I thought I would just try an alternative solution using the same HTML corrected to fix the problem with multiple forms for the label.

Answer 2

Try positioning the transparent div on top of the form elements (this should not be too complicated with jQuery), and do this mouse click with your mouse.

Answer 3

Here is the solution I used here . Basically, clicking on the wrapper around the controls causes the selection box to be replaced and disabled. Since your labels cover everything, additional tags are not needed (except 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> 

Hope this helps.