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

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

Я стремлюсь к тому, чтобы при нажатии радиокнопки, метки рядом с ней и, в случае раздела делового партнера, раскрывающегося списка, этот конкретный раздел должен стать активным. Что я обнаружил, так это то, что когда «Ярлык для» обернут вокруг переключателя и раскрывающегося списка, у которого есть атрибут disabled=true через jQuery, когда включен противоположный раздел, фактически щелчок по раскрывающемуся списку не работает. t включить этот раздел. Также событие щелчка не запускается для раскрывающегося списка, что, как я полагаю, является правильным, поскольку для его отключенного состояния установлено значение true. Я пытался использовать как событие щелчка для переключателей, так и метки, но отключенный раскрывающийся список кажется черной дырой, обрабатывающей события. Я использую 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>

events html drop-down-menu jquery
person MotoWilliams    schedule 08.03.2009    source источник

Ответы (3)


arrow_upward
4
arrow_downward

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

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

person Wick    schedule 10.03.2009
comment
Другой квази-отключенный вариант с использованием selectedIndex: carcomplaints.com/test/motowilliams2.html - person Wick; 10.03.2009
comment
Правильно, я хотел отключить свойство только для внешнего вида. Это маршрут, с которым я столкнулся, который позволяет событию клика продолжать работать в раскрывающемся списке. Я также «развернул» свою этикетку. Пока все так, как и ожидалось. - person MotoWilliams; 10.03.2009
comment
Прохладный. Хороший улов относительно событий кликов и отключенных элементов формы. Похоже, это была открытая ошибка Mozilla с 2003 года (!!). show_bug.cgi?id=218093 bugzilla.mozilla.org/show_bug.cgi ?id=190876 (дублирование предыдущей ошибки, но более точное описание без этого вопроса) - person Wick; 10.03.2009

arrow_upward
1
arrow_downward

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

person David Hanak    schedule 08.03.2009
comment
когда я раскручивался, чтобы попробовать это самое, я заметил ваш ответ ... следите за обновлениями ... ;) - person MotoWilliams; 09.03.2009

arrow_upward
1
arrow_downward

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

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

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

person Eric    schedule 06.05.2009