jQuery禁用select基于select的选项（需要支持所有浏览器）
好的，这里有一些麻烦，想select收音机时禁用一些选项。 当ABC被select禁用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> 没有任何想法？
更新：
好吧，我得到了启用/禁用工作，但出现了一个新问题。 我的select框的禁用选项只适用于FF和IE8。 我testing了IE6和残疾人不工作。 我试图用hide（）和show（）也没有运气。 基本上我需要隐藏/禁用/删除选项（适用于所有浏览器），并且如果select了其他无线电选项，则可以将其添加回来，反之亦然。
结论：
感谢所有的解决scheme，他们大部分都回答了我原来的问题。 许多项目都:)
实现所需function的正确方法是删除选项。 正如你发现困难的方式，禁用个别选项不支持跨浏览器特别好。 我刚刚醒来，感觉像编程的东西，所以我掀起了一个小插件，以根据收音机的selectID属性轻松过滤select。 虽然其余的解决scheme将完成工作，但如果您计划在整个应用程序中这样做，这应该有所帮助。 如果没有，那么我想这是对其他任何人都绊倒这一点。 这里是你可以隐藏在某处的插件代码：
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'] }); });
第一个参数是radio组的select器，第二个参数是一个字典，其中的键是要匹配的无线电ID，值是一个select值应该保留的数组。 有很多事情可以进一步抽象，让我知道你是否有兴趣，我当然可以做到这一点。
这是一个在行动中的演示 。
编辑 ：另外，忘记添加，根据jQuery 文档 ：
在jQuery 1.3 [@attr]风格的select器被删除（他们以前在jQuery 1.2中弃用）。 只需从select器中删除“@”符号，以使其再次工作。
你想要这样的东西 – 示例代码在这里
$(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",""); } }); });
编辑：
改进了代码版本，使用正则expression式根据选项值过滤选项。 工作示例在这里 。 您可以通过添加/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]/ : /[ac]/; var regexEnabled = radio == 'abc' ? /[ac]/ : /[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 ie 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：
由于禁用属性在浏览器中不能可靠地工作，我认为唯一的select是在select单选button时删除不需要的选项元素。 工作示例在这里
$(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' ? /[ac]/ : /[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' ? /[ac]/ : /[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);}) ); }); });
第一个问题是与
$(this).val()
用它replace
$(this).attr('id') == 'abc'
那么这将无法正常工作
$("'theOptions'..")
使用
$("#theOptions option[value='1']").attr('disabled','disabled') //to disable $("#theOptions option[value='a']").attr('disabled','') //to ENABLE
你使用哪个浏览器？ 我从来没有使用过，但似乎IE8之前的IE不支持。 请参阅此链接了解更多信息：
你的select是错误的。 代替
$("'theOptions' option[value='1']")
你应该使用
$("#theOptions > option[value='1']")
另请参阅jQuery select器文档 。 并看看aman.tur的build议 。
$(":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); });
如果你想禁用一些选项，比下面的代码应该工作
$("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'; }) });
和无线电button
ABC: <input type="radio" name="abc123" value="abc" id="abc"/> 123: <input type="radio" name="abc123" value="123" id="123"/>
如果你想从select列表中删除选项，比使用这个代码
$(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）。 如果您使用的是旧版本，则需要将属性select器更改为旧语法。
选项[value ='1']到选项[@ value ='1']
只需将select器$("'theOptions' option[value='1']") $("#theOptions option[value='1']")为$("#theOptions option[value='1']") ，一切都将正常工作
