如果在其他选项中禁用jQuery选项

如果在任何选择中选择了该选项，我试图尝试禁用一个选项

因此，例如，如果name =“select1”已经选择了“测试2”选项，那么我想要在两个select语句中禁用“Test 2”，如果有其他事情被检查，它会重新启用上一个选项。

我在这里写了一个示例脚本，我以为会让我“关闭”…但是这让我远离了这里。任何帮助将不胜感激。

<script type="text/javascript">
$(document).ready(function(){
 $("select").change(function() {
  $("select").find("option:selected").attr('disabled',true);
 });
});
</script>

<select name="select1">
    <option>No Match</option>
    <option value="1">Test</option>
    <option value="2">Test 2</option>
    <option value="3">Test 3</option>
</select>

<select name="select2">
    <option>No Match</option>
    <option value="1">Test</option>
    <option value="2">Test 2</option>
    <option value="3">Test 3</option>
</select>

解决方法

现场演示： http://jsfiddle.net/dZqEu/

$('select').change(function() {

    var value = $(this).val();

    $(this).siblings('select').children('option').each(function() {
        if ( $(this).val() === value ) {
            $(this).attr('disabled',true).siblings().removeAttr('disabled');   
        }
    });

});

您可能更喜欢此版本的代码：

$('select').change(function() {

    $(this)
        .siblings('select')
        .children('option[value=' + this.value + ']')
        .attr('disabled',true)
        .siblings().removeAttr('disabled');

});

现场演示：http://jsfiddle.net/dZqEu/2/

请注意，此第二个版本是单行(一行代码)，但我将其格式化为更易于阅读。我更喜欢这第二版。

另外，请注意，我的代码假定这两个SELECT框是DOM的兄弟元素。如果这不是你的情况，那么这个代码 – $(this).siblings(‘select’) – 将不适合你，你必须使用jQuery的遍历方法跳转到另一个SELECT框。

在最坏的情况下 – 当SELECT框在DOM树中相隔很远时，遍历不会很有效 – 您可以为其分配ID属性，并使用此代码选择另一个框：

$('#select1,#select2').not(this)

现场演示：http://jsfiddle.net/dZqEu/3/