JQuery - убрать флажок из выбранного в выпадающем списке

Question

я знаю, что заголовок немного запутан.

я хочу, чтобы у меня был выпадающий список, там есть несколько опций, две из них "особенные".Когда вы выбираете один из этих двух, 3 флажка должны быть сняты / удалены / т. Д.

вот какой-то код:

HTML:

//THE DROPDOWN
<select id="pow-abo" style="float:left;">
<option id="data6" value="149">XXXX</option>
<option id="data11" value="199">XXXX</option>
</select>

//THE CHECKBOXES
<div id="pakkerPow">
<input id="surfstart" type="checkbox" value="29" />XXXX<br/>
<input id="surfmini" type="checkbox" value="49" />XXXX<br/>
<input id="surfmaxi" type="checkbox" value="99" />XXXX<br/>
</div>

Jquery:

// THE JQUERY DROPDOWN
$('#pow-abo').change(function (){
    powAbo = parseFloat($('#pow-abo').val());
    if($('#pow-abo').id() == 'data6' || $('#pow-abo').id() == 'data11')
    {
        $('#surfstart').hide();
        $('#surfmini').hide();
        $('#surfmaxi').hide();
    }
    visResultat2();
});

Answer 1

Есть пара проблем с вашим кодом.Они сосредоточены вокруг вашего if заявления.Посмотрите на следующий фрагмент:

$('#pow-abo').id()

Первая проблема заключается в том, что id не является методом объекта jQuery.Вторая проблема заключается в том, что #pow-abo является элементом select, а не выбранной опцией.Похоже, вы пытаетесь получить id выбранной опции.

Чтобы получить выбранную опцию, в качестве элемента DOM (не объекта jQuery) вы можете сделать что-то вроде этого:1012 *

После этого вы сможете использовать selected.id для получения id выбранной опции:

$('#pow-abo').change(function () {
    var selected = $(this).find(":selected")[0],
        powAbo = parseFloat($('#pow-abo').val());
    if(selected.id == 'data6' || selected.id == 'data11') {
        $('#surfstart').hide();
        $('#surfmini').hide();
        $('#surfmaxi').hide();
    }
});

Обратите внимание, что вы также можете сократить вызовы hide до одного:1020 *

$("#surfstart, #surfmini, #surfmaxi").hide();

Или, чтобы скрыть все флажки внутри #pakkerPow:

$("#pakkerPow :checkbox").hide();

Answer 2

Я бы сделал это так: http://jsfiddle.net/pZcAF/6/

Короче говоря:

• у вас есть несколько ошибок в вашем jQuery
• Вы hide() флажки вместо их отключения
• вы никогда не включаете их (или show()) обратно

Дополнительная функция в примере (в качестве бонуса, если вы считаете ее полезной):

• проверяет заданный класс на «специальные» опции (позволяет иметь динамически создаваемый список специальных опций)

Answer 3

Ваш тест должен соответствовать выбранному значению, а не идентификаторам:

 // THE JQUERY DROPDOWN
$('#pow-abo').change(function (){
  powAbo = parseFloat($(this).val());
  if(powAbo == '199' || powAbo == '149')
  {
    $("#pakkerPow input").attr("disabled", "disabled");
  }
  visResultat2();
});

Answer 4

, если вы действительно хотите использовать show and hide, посмотрите на эту демонстрацию: http://jsfiddle.net/xAcz7/

Вместо того, чтобы смотреть на id, я смотрю на значения, которые скрыты для вариантов 1 и 2 и показаны для варианта 3 И вместо того, чтобы скрывать 3 флажка, я просто скрываю div, который содержит флажки. сохраняет вам строки кода;) Надеюсь, это поможет

Answer 5

Чтобы «выделить серым» или отключить элемент формы, необходимо добавить к нему атрибут disabled.

Вместо

$('#surfstart').hide();

Сделайте это

$('#surfstart').attr('disabled','disabled');

Чтобы включить отключенный элемент

$('#surfstart').removeAttr('disabled');