Question

在这里遇到一些麻烦，想在选择收音机时禁用一些选项。选择ABC时，禁用1,2＆amp; 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>

没有任何想法？

更新：

好的我启用/禁用了工作但是出现了一个新问题。我的选择框的禁用选项仅适用于FF和IE8。我测试了IE6，而且残疾人无法正常工作。我试图使用hide（）和show（）也没有运气。基本上我需要隐藏/禁用/删除选项（适用于所有浏览器），如果选择了其他无线电选项，则可以将它们添加回来，反之亦然。

结论：

感谢所有解决方案，他们中的大多数都回答了我原来的问题。对所有人提出了很多建议：）

Answer 1

实现所需功能的正确方法就是删除选项。正如您发现的那样，在浏览器中不支持禁用单个选项。我刚刚醒来，觉得自己喜欢编程，所以我掀起了一个小插件，可以根据收音机选择的ID属性轻松过滤选择。虽然其他解决方案将完成工作，但如果您计划在整个应用程序中执行此操作，这应该会有所帮助。如果没有，那么我想其他人偶然发现了这一点。以下是您可以在某处隐藏的插件代码：

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']        
    });
});

第一个参数是无线电组的选择器，第二个参数是字典，其中键是要匹配的无线电ID，值是应保留的选项值的数组。可以做很多事情来进一步抽象，如果你有兴趣我可以告诉我，我当然可以这样做。

Here is a demo of it in action

编辑：另外，根据jQuery documentation忘了添加：

在jQuery 1.3 [@attr]中删除了样式选择器（它们之前在jQuery 1.2中已被弃用）。只需从选择器中删除“@”符号，即可使它们再次工作。

Answer 2

你想要这样的事情 - Example Code here

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

   }    
});

});

修改

改进了代码版本，使用正则表达式根据选项值过滤选项。 Working example here。您可以通过将/edit添加到网址
来编辑示例
$(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：

由于禁用的属性似乎无法跨浏览器可靠地工作，我认为您唯一的选择是删除选中单选按钮时不需要的选项元素。 Working Example here

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

Answer 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

Answer 4

你正在使用哪种浏览器？我之前从未使用它，但在IE8之前IE似乎不受支持。有关更多信息，请参阅此链接：

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

Answer 5

你的选择器错了。而不是

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

你应该使用

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

另请参阅jQuery selectors documentation。并查看aman.tur的suggestion。

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

顺便说一句。我的代码使用当前稳定版本的jQuery（1.3.2）。如果您使用的是旧版本，则需要将属性选择器更改为旧语法。

选项[value ='1']选项[@ value ='1']

Answer 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);
});

Answer 8

只需将选择器$("'theOptions' option[value='1']")修复为 $("#theOptions option[value='1']")，一切都会正常工作

jQuery禁用基于Radio选择的SELECT选项（需要支持所有浏览器）

8 个答案: