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

Question

jQuery禁用基于Radio选择的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>

不工作任何想法？

更新：

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

结论：

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

Answer 1

实现所需功能的正确方法是删除选项。正如您发现的那样，在浏览器中不支持禁用单个选项。我刚刚醒来，觉得自己喜欢编程，所以我掀起了一个小插件，可以根据收音机选择的ID属性轻松过滤选择。虽然其他解决方案将完成工作，但如果您计划在整个应用程序中执行此操作，这应该会有所帮助。如果没有，那么我想其他人偶然发现了这一点。这是你可以在某处隐藏的插件代码：jQuery.fn.filterOn&nbsp;=&nbsp;function(radio,&nbsp;values)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;this.each(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;select&nbsp;=&nbsp;this; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;options&nbsp;=&nbsp;[]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(select).find('option').each(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;options.push({value:&nbsp;$(this).val(),&nbsp;text:&nbsp;$(this).text()}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(select).data('options',&nbsp;options); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(radio).click(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;options&nbsp;=&nbsp;$(select).empty().data('options'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;haystack&nbsp;=&nbsp;values[$(this).attr('id')]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.each(options,&nbsp;function(i)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;option&nbsp;=&nbsp;options[i]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if($.inArray(option.value,&nbsp;haystack)&nbsp;!==&nbsp;-1)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(select).append( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('<option>').text(option.text).val(option.value) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;});};以下是如何使用它：$(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;$('#theOptions').filterOn('input:radio[name=abc123]',&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'abc':&nbsp;['a','b','c'], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'123':&nbsp;['1','2','3']&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;});});第一个参数是无线电组的选择器，第二个参数是字典，其中键是要匹配的无线电ID，值是应保留的选项值的数组。有很多事情可以做进一步抽象，让我知道你是否感兴趣，我当然可以这样做。这是它的实际演示。编辑：另外，忘了添加，根据jQuery&nbsp;文档：在jQuery 1.3 [@attr]样式选择器被删除（它们之前在jQuery 1.2中被弃用）。只需从选择器中删除“@”符号，以便再次使用它们。

Answer 2

第一个问题是$(this).val()用它替换它$(this).attr('id')&nbsp;==&nbsp;'abc'那么这不会奏效$("'theOptions'..")使用$("#theOptions&nbsp;option[value='1']").attr('disabled','disabled')&nbsp;//to&nbsp;disable $("#theOptions&nbsp;option[value='a']").attr('disabled','')&nbsp;//to&nbsp;ENABLE