jQuery отключить опции SELECT на основе выбранного радио (нужна поддержка для всех браузеров) - PullRequest
34 голосов
/ 18 мая 2009

Ладно, возникли некоторые проблемы, я хотел отключить некоторые опции при выборе радио. При выборе ABC отключите опции 1,2 и 3 и т. Д. *

$("input:radio[@name='abc123']").click(function() {
   if($(this).val() == 'abc') {

      // Disable 
      $("'theOptions' option[value='1']").attr("disabled","disabled");
      $("'theOptions' option[value='2']").attr("disabled","disabled");
      $("'theOptions' option[value='3']").attr("disabled","disabled");

   } else {
      // Disbale abc's
   }    
});

ABC: <input type="radio" name="abc123" id="abc"/>
123: <input type="radio" name="abc123" id="123"/>

<select id="theOptions">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="a">a</option>
  <option value="b">b</option>
  <option value="c">c</option>
</select>

Не работают идеи?

UPDATE:

Хорошо, я получил разрешение включить / отключить, но возникла новая проблема. Отключенные опции для моего поля выбора работают только в FF и IE8. Я проверил IE6, и отключенный не работает. Я попытался использовать hide () и show (), но безуспешно. в основном мне нужно скрыть / отключить / удалить параметры (для всех браузеров) и иметь возможность добавить их обратно, если выбран другой параметр радио, и наоборот.

ВЫВОД:

Спасибо за все решения, большинство из них ответили на мой оригинальный вопрос. Многое СПАСИБО всем:)

Ответы [ 8 ]

72 голосов
/ 18 мая 2009

Правильный способ достичь желаемой функциональности - просто удалить опции. Как вы обнаружили, сложный путь, отключение отдельных опций не особенно хорошо поддерживается в разных браузерах. Я просто проснулся и чувствую, что программирую что-то, поэтому я включил небольшой плагин, чтобы легко фильтровать выборку на основе выбранного идентификатора радио. Хотя остальные решения выполнят свою работу, если вы планируете делать это в своем приложении, это должно помочь. Если нет, то я думаю, что это касается кого-то еще. Вот код плагина, который вы можете где-то спрятать:

jQuery.fn.filterOn = function(radio, values) {
    return this.each(function() {
        var select = this;
        var options = [];
        $(select).find('option').each(function() {
            options.push({value: $(this).val(), text: $(this).text()});
        });
        $(select).data('options', options);
        $(radio).click(function() {
            var options = $(select).empty().data('options');
            var haystack = values[$(this).attr('id')];
            $.each(options, function(i) {
                var option = options[i];
                if($.inArray(option.value, haystack) !== -1) {
                    $(select).append(
                    $('<option>').text(option.text).val(option.value)
                    );
                }
            });
        });            
    });
};

А вот как это использовать:

$(function() {
    $('#theOptions').filterOn('input:radio[name=abc123]', {
        'abc': ['a','b','c'],
        '123': ['1','2','3']        
    });
});

Первый аргумент - это селектор для группы радиостанций, второй - словарь, в котором ключами являются идентификаторы радиосвязи, а значение - это массив значений параметров выбора, которые должны остаться. Есть много вещей, которые можно было бы сделать, чтобы абстрагироваться дальше, дайте мне знать, если вы заинтересованы, и я, конечно, могу это сделать.

Вот демонстрация этого в действии .

РЕДАКТИРОВАТЬ : Кроме того, забыли добавить, согласно документации jQuery :

В jQuery 1.3 селекторы стиля [@attr] были удалены (ранее они не использовались в jQuery 1.2). Просто уберите символ «@» из ваших селекторов, чтобы они снова заработали.

17 голосов
/ 18 мая 2009

Вы хотите что-то вроде этого - Пример кода здесь

$(function() {

$("input:radio[@name='abc123']").click(function() {
   if($(this).attr('id') == 'abc') {

      // Disable 123 and Enable abc
      $("#theOptions option[value='1']").attr("disabled","disabled");
      $("#theOptions option[value='2']").attr("disabled","disabled");
      $("#theOptions option[value='3']").attr("disabled","disabled");
      $("#theOptions option[value='a']").attr("selected","selected");
      $("#theOptions option[value='a']").attr("disabled","");
      $("#theOptions option[value='b']").attr("disabled","");
      $("#theOptions option[value='c']").attr("disabled","");

   } else {
      // Disable abc's and Enable 123
      $("#theOptions option[value='a']").attr("disabled","disabled");
      $("#theOptions option[value='b']").attr("disabled","disabled");
      $("#theOptions option[value='c']").attr("disabled","disabled");
      $("#theOptions option[value='1']").attr("selected","selected");          
      $("#theOptions option[value='1']").attr("disabled","");   
      $("#theOptions option[value='2']").attr("disabled","");
      $("#theOptions option[value='3']").attr("disabled","");

   }    
});

});

EDIT:

Улучшенная версия кода с использованием регулярного выражения для фильтрации параметров на основе значений параметров. Рабочий пример здесь . Вы можете отредактировать пример, добавив /edit к URL

$(function() {

    $("input:radio[@name='abc123']").click(function() {

        // get the id of the selected radio
        var radio = $(this).attr('id'); 

        // set variables based on value of radio
        var regexDisabled = radio == 'abc' ?  /[1-3]/ : /[a-c]/;      
        var regexEnabled = radio == 'abc' ? /[a-c]/ : /[1-3]/;
        var selection = radio == 'abc' ? 'a' : 1;

        // select all option elements who are children of id #theOptions
        $("#theOptions option")
            // filter the option elements to only those we want to disable
            .filter( function() { return this.value.match(regexDisabled);})
            // disable them
            .attr("disabled","disabled")
            // return to the previous wrapped set i.e. all option elements
            .end()
            // and filter to those option elements we want to enable
            .filter( function() { return this.value.match(regexEnabled);})
            // enable them
            .attr("disabled","");
       // change the selected option element in the dropdown
       $("#theOptions option[value='" + selection + "']").attr("selected","selected");

    });

});

РЕДАКТИРОВАТЬ 2:

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

  $(function() {

        $("input:radio[@name='abc123']").click(function() {

            // store the option elements in an array
            var options = [];
            options[0] = '<option value="1">1</option>';
            options[1] = '<option value="2">2</option>';
            options[2] = '<option value="3">3</option>';
            options[3] = '<option value="a">a</option>';
            options[4] = '<option value="b">b</option>';
            options[5] = '<option value="c">c</option>';


            var radio = $(this).attr('id');   
            var regexEnabled = radio == 'abc' ? /[a-c]/ : /[1-3]/;

            // set the option elements in #theOptions to those that match the regular expression
            $("#theOptions").html(
            $(options.join(''))
                // filter the option elements to only those we want to include in the dropdown
                .filter( function() { return this.value.match(regexEnabled);})
            );


        });

    });

или даже

  $(function() {

        // get the child elements of the dropdown when the DOM has loaded
        var options = $("#theOptions").children('option');

        $("input:radio[@name='abc123']").click(function() {         

            var radio = $(this).attr('id');   
            var regexEnabled = radio == 'abc' ? /[a-c]/ : /[1-3]/;

            // set the option elements in #theOptions to those that match the regular expression
            $("#theOptions").html(
            $(options)
                // filter the option elements to only those we want to include in the dropdown
                .filter( function() { return this.value.match(regexEnabled);})
            );

        }); 
    });
3 голосов
/ 18 мая 2009

первая проблема с

$(this).val()

замените его на

$(this).attr('id') == 'abc'

тогда это не будет работать

$("'theOptions'..")

использование

$("#theOptions option[value='1']").attr('disabled','disabled') //to disable
$("#theOptions option[value='a']").attr('disabled','') //to ENABLE
1 голос
/ 18 мая 2009

какой браузер вы используете? Я никогда не использовал его раньше, но кажется, что он не поддерживается IE до IE8. Смотрите эту ссылку для получения дополнительной информации:

http://www.w3schools.com/TAGS/att_option_disabled.asp

0 голосов
/ 27 июля 2010

просто исправьте селектор $("'theOptions' option[value='1']"), чтобы $("#theOptions option[value='1']") и все будет работать нормально

0 голосов
/ 18 мая 2009
$(":radio[name=abc123]").click(function() {
   var $options = $("#theOptions")
   var toggle = ($(this).val() == 'abc') ? true : false;

   $("[value=1],[value=2],[value=3]", $options).attr("disabled", toggle);
   $("[value=a],[value=b],[value=c]", $options).attr("disabled", !toggle);
});
0 голосов
/ 18 мая 2009

Если вы хотите отключить некоторые опции, то код ниже должен работать

$("input:radio[name='abc123']").click(function() {
   var value = $(this).val();

   $("option[value='1'], option[value='2'], option[value='3']", "#theOptions").each(function(){
      this.disabled = value == 'abc';
   });
   $("option[value='a'], option[value='b'], option[value='c']", "#theOptions").each(function(){
      this.disabled = value == '123';
   })
});

и радио-кнопки

ABC: <input type="radio" name="abc123" value="abc" id="abc"/>
123: <input type="radio" name="abc123" value="123" id="123"/>

Если вы хотите удалить опции из списка выбора, используйте этот код

$(function(){
   var options = null;
   $("input:radio[name='abc123']").click(function() {
      var value = $(this).val();
      if(options != null)options.appendTo('#theOptions');
      if(value == 'abc' )
         options = $("option[value='1'], option[value='2'], option[value='3']", "#theOptions").remove();
      else if(value == '123')
         options = $("option[value='a'], option[value='b'], option[value='c']", "#theOptions").remove();
   });
});

КСТАТИ. мой код использует текущую стабильную версию jQuery (1.3.2). Если вы используете более старую версию, вам нужно изменить селекторы атрибутов на старый синтаксис.

параметр [значение = '1'] для параметра [@ значение = '1']

0 голосов
/ 18 мая 2009

Ваш селектор неверен. Вместо

$("'theOptions' option[value='1']")

вы должны использовать

$("#theOptions > option[value='1']")

См. Также документацию по селекторам jQuery . И взгляните на предложение от aman.tur.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...