JQuery отключить параметры SELECT на основе выбранного радио (нужна поддержка для всех браузеров)

Итак, у меня есть немного проблем, хотелось отключить некоторые опции при выборе радио. Когда выбрано 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(). в основном мне нужно скрывать/отключать/удалять параметры (для всех браузеров) и иметь возможность добавлять их обратно, если выбран другой параметр радио и наоборот.

ВЫВОД:

Спасибо за все решения, большинство из них ответили на мой оригинальный вопрос. Много PROPS для всех:)

ОТВЕТЫ

Ответ 1

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

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). Просто удалите символ "@" из ваших селекторов, чтобы заставить их работать снова.

Ответ 2

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

$(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 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:

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

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

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

$(this).val()

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

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

то это не сработает

$("'theOptions'..")

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

$("#theOptions option[value='1']").attr('disabled','disabled') //to disable
$("#theOptions option[value='a']").attr('disabled','') //to ENABLE

Ответ 4

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

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

Ответ 5

Ваш селектор ошибочен. Вместо

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

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

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

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

Ответ 6

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

$("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();
   });
});

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

option [value = '1'] для опции [@value = '1']

Ответ 7

$(":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);
});

Ответ 8

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