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

Question

好的，这里有点麻烦，想在选择无线电时禁用一些选项。当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都:)

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。

EDIT：另外，忘了补充，根据jQuery的documentation：

在jQuery的1.3 [@attr]除去的样式选择器（它们先前在jQuery 1.2中建议使用）。只需从选择器中删除'@'符号，以便再次使用它们。

Answer 2

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

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

Answer 3

你的选择是错误的。取而代之的

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

你应该使用

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

又见了jQuery selectors documentation。并看看由aman.tur suggestion。

Answer 4

的第一个问题是

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

如果要禁用一些选项，比下面的代码应该工作

$("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']

Answer 6

你想是这样的 - 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到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属性不会出现跨浏览器可靠地工作，我认为你唯一的选择是去除选择单选按钮时不需要选项元素。 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 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']")，一切都将正常工作