根据选择的单选框禁用jQuery中的SELECT选项(需要支持所有浏览器)
根据选择的单选框禁用jQuery中的SELECT选项(需要支持所有浏览器)
嗯,我在这里遇到了一些问题,想要在选择单选框时禁用一些选项。当选择ABC时,禁用1、2和3选项,等等...\n
$("input:radio[@name='abc123']").click(function() { if($(this).val() == 'abc') { // 禁用 $("'theOptions' option[value='1']").attr("disabled","disabled"); $("'theOptions' option[value='2']").attr("disabled","disabled"); $("'theOptions' option[value='3']").attr("disabled","disabled"); } else { // 禁用ABC } }); ABC: 123:
\n不起作用,有什么想法吗?\n更新:\n好的,我解决了启用/禁用的问题,但是出现了一个新问题。我的选择框的禁用选项只在FF和IE8中起作用。我测试了IE6,禁用不起作用。我尝试使用hide()和show(),但也没有成功。基本上,我需要在所有浏览器中隐藏/禁用/移除选项,并能在选择其他单选框选项时重新添加它们,反之亦然。\n结论:\n感谢所有的解决方案,大部分都回答了我最初的问题。非常感谢 🙂
问题出现的原因是使用了错误的代码和方法来禁用和启用下拉选项。解决方法是使用正确的代码和方法。
首先,问题出现在代码$(this).val()
中。应该将其替换为$(this).attr('id') == 'abc'
。
然后,代码$("'theOptions'..")
是错误的,应该使用$("#theOptions option[value='1']").attr('disabled','disabled')
来禁用选项,使用$("#theOptions option[value='a']").attr('disabled','')
来启用选项。
这样做是有效的,但是有一个后续问题。如何选择一个已启用的选项呢?如果你的意思是如何启用选项,那么最后一行代码可以实现。如果不是这个意思,那就不明白了:(
我看到了,但是我想要的是在下拉列表中选择一个已启用的选项。当禁用选项时,如果一个选项已经被预选中,即使它被禁用,它仍然是启用状态,直到你选择一个已启用的选项。然后你就不能再选择它了。抱歉,这样说清楚了吗?所以如果我禁用了"abs",而"a"被预选中,直到我重新选择一个已启用的选项,"a"仍然是启用状态。
好的,谢谢,让我试试。另一个问题也浮出水面,请阅读原始问题的编辑版本。顺便说一句,非常感谢你的帮助和反馈!
问题的原因是希望根据选中的单选按钮来禁用或启用下拉列表中的选项。解决方法是使用jQuery选择器和属性操作来禁用或启用特定的选项,并使用正则表达式来过滤选项。另外,考虑到浏览器的兼容性问题,还提供了一种移除不需要的选项元素的解决方案。
第一种解决方法是根据选中的单选按钮使用jQuery来禁用或启用选项。当选中的单选按钮是"abc"时,禁用值为1、2、3的选项并启用值为"a"的选项;当选中的单选按钮不是"abc"时,禁用值为"a"、"b"、"c"的选项并启用值为1的选项。
第二种解决方法是改进了第一种方法,使用正则表达式来根据选中的单选按钮的值过滤选项。使用变量和正则表达式来设置禁用和启用选项的条件,并根据选中的单选按钮的值设置选择的选项。通过筛选符合条件的选项元素来禁用或启用选项。
第三种解决方法是由于disabled属性在各个浏览器中的兼容性问题,所以唯一的解决方法是在选中单选按钮时移除不需要的选项元素。通过将选项元素存储在数组中,并根据选中的单选按钮的值使用正则表达式来筛选需要保留的选项,并将这些选项重新添加到下拉列表中。
第四种解决方法是在DOM加载完成时获取下拉列表的选项元素,并将其存储在变量中。然后根据选中的单选按钮的值使用正则表达式来筛选需要保留的选项,并将这些选项重新添加到下拉列表中。
最后,还提到了一个问题,即如何在切换选中的单选按钮时添加或移除选项元素,并如何检查重复项。对于第三种和第四种解决方法,通过正则表达式的匹配来处理添加或移除选项元素,并避免重复项的出现。但是由于浏览器的兼容性问题,第三种解决方法可能无法正常工作。
总结起来,问题的原因是希望根据选中的单选按钮来禁用或启用下拉列表中的选项,解决方法是使用jQuery选择器和属性操作以及正则表达式来实现。由于浏览器的兼容性问题,提供了多种解决方案来处理移除不需要的选项元素和添加或移除选项元素时的重复项。
问题的出现原因:禁用单个选项在不同浏览器中的支持不够好。
解决方法:通过移除选项来实现所需的功能。可以使用一个小型插件来轻松地根据选中的单选按钮的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,值是应保留的下拉选项值的数组。可以进一步抽象化这个功能,如果有兴趣的话,请告诉我。
需要注意的是,在jQuery 1.3中,需要将选择器中的"@"符号删除,以使其正常工作。
插件代码可以放在document.ready之外,只要在引入jQuery之后即可。调用插件的代码应放在document.ready内或文档底部。
如果想要匹配的内容只是一组单独的值,最好将其作为数组传递,例如:'P': ['BGE','BGE_KKI','OKE']。
如果希望在页面加载时选中选项,可以将代码放在onload事件中。
尽管没有使用这段精确的代码,但可以根据需要进行修改。这个插件对我很有帮助。
如果复选框是下拉框,应该如何处理?
如果想要使用下拉框而不是单选按钮,只需要在函数中将input:radio
改为input:select
即可。