Включить раскрывающийся список отключенных в данный момент при нажатии раскрывающегося списка

Question

Вот сценарий: У меня есть две радиокнопки: 1) для обычных клиентов и 2) для деловых партнеров, у которых также есть элемент управления раскрывающимся списком, так что один из X деловых партнеров может быть выбран. Когда выбран один тип клиента, другой раздел становится темным с обычным отключением элементов управления и применением CSS для получения этого отключенного вида.

Я стремлюсь к тому, чтобы, когда переключатель, ярлык рядом с ним и, в случае с разделом «Деловой партнер», в раскрывающемся списке щелкали, был включен конкретный раздел. Я обнаружил, что когда «Метка для» обернута вокруг переключателя и выпадающего списка, у которого свой атрибут отключен = true через jQuery, когда включен противоположный раздел, то на самом деле нажатие на выпадающий список не делает ». включить этот раздел. Также событие click не вызывается для выпадающего списка, который, как я полагаю, является правильным, поскольку его отключенное состояние установлено в true. Я попытался использовать событие click для переключателей и надписей, но отключенный раскрывающийся список, похоже, является черной дырой для обработки событий. Я использую jQuery и Asp.net MVC, но я убежден в актуальности, по крайней мере, MVC в этом случае.

Событие с переключателем и меткой будет запускаться через отключенный раскрывающийся список в IE7, но не в браузерах Firefox3 и Chrome.

Есть идеи?

<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

Вы абсолютно правы, свойство disabled превращает блок выбора в черную дыру. Даже обычное браузерное контекстное меню Firefox, вызываемое правой кнопкой мыши, не работает над ним.

Звучит так, как будто вы намерены повторно включить поле выбора при щелчке контейнера ярлыков, так что отключено ли состояние только ради внешнего вида? .. Если так, что если вы сделали поле выбора просто look отключенным с помощью прозрачности 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>

Тестовая страница здесь: http://www.carcomplaints.com/test/motowilliams.html

Кажется, работает нормально в FF3, и я думаю, браузеры Chrome тоже. К сожалению, в IE7 (жаль, что у меня не было никеля за каждый раз, когда я это говорил), поле выбора теряет фокус, если щелкнуть по нему напрямую ... что-то внутреннее в IE, что, похоже, связано с изменением фильтра непрозрачности в объекте выбора.

Боковая панель ... не обращая внимания на проблему "отключенного" окна выбора на мгновение: даже если вы используете синтаксис "for = ..." на своих ярлыках, я не думаю, что допустимо иметь несколько элементов формы, содержащихся внутри один тег метки. Если это действительно так, может быть, просто не очень хорошая идея. Сама идея заключается в том, что щелчок в любом месте метки дает фокус связанному элементу формы, поэтому теоретически ваше поле выбора (которое является вторым элементом формы внутри метки) никогда не должно фокусироваться. FF3 справляется с этим правильно - если вы попробуете свой код без отключения поля выбора, вы увидите проблему.

Надеюсь, это поможет. Оверлей div, предложенный первым постером, может быть подходящим вариантом. Я подумал, что просто попробую альтернативное решение с использованием того же HTML-кода, настроенного для решения этой проблемы с несколькими элементами формы на ярлык.

Answer 2

Вот решение, которое я использовал здесь . По сути, нажатие на оболочку вокруг элементов управления приводит к включению и отключению поля выбора. Поскольку ваши ярлыки охватывают все, дополнительные теги не нужны (кроме скрипта).

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

Надеюсь, это поможет.

Answer 3

Попробуйте расположить прозрачный div поверх элементов формы (это не должно быть слишком сложно с jQuery), и этот div захватит ваш щелчок мышью.