如何使用 jquery 禁用和启用选项项？答案

【问题标题】：how to disabled and enabled option item with jquery?如何使用 jquery 禁用和启用选项项？
【发布时间】：2014-07-18 12:49:20
【问题描述】：

我的表单中有 4 个选择项。当用户在任何选择中选择一个项目时，我希望在每个其他选择元素中禁用该项目。当我选择所有选项时会出现我的问题，因为它会禁用所有内容。选择/取消选择时如何启用/禁用项目？

JsFiddle

First referee: <select class="d1">
  <option>One</option>  
  <option>Two</option> 
  <option>Three</option> 
  <option>Four</option> 
  <option>Five</option>  
  <option>Six</option> 
</select>
Second referee: <select class="d2">
  <option>One</option>  
  <option>Two</option> 
  <option>Three</option> 
  <option>Four</option> 
  <option>Five</option>  
  <option>Six</option> 
</select>

Third referee: <select class="d3">
  <option>One</option>  
  <option>Two</option> 
  <option>Three</option> 
  <option>Four</option> 
  <option>Five</option>  
  <option>Six</option> 
</select>
Fourth referee:<select class="d4">
  <option>One</option>  
  <option>Two</option> 
  <option>Three</option> 
  <option>Four</option> 
  <option>Five</option>  
  <option>Six</option> 
</select>


$(document).ready(function () {

    $('.d1, .d2, .d3, .d4').change(function () {
        var V1 = $('.d1').find(":selected").text();
        var V2 = $('.d2').find(":selected").text();
        var V3 = $('.d3').find(":selected").text();
        var V4 = $('.d4').find(":selected").text();

        $('.d1, .d2, .d3, .d4').children().each(function (index, element) {
            if ($(element).text() == V1 ) {
                $(this).prop('disabled', true);
            }
            if ($(element).text() == V2) {
                $(this).prop('disabled', true);
            }
            if ($(element).text() == V3) {
                $(this).prop('disabled', true);
            }
            if ($(element).text() == V4) {
                $(this).prop('disabled', true);
            }


        });
    });

});

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

您可以尝试以下方法作为快速修复

$(document).ready(function () {

$('.d1, .d2, .d3, .d4').change(function () {
    var V1 = $('.d1').find(":selected").text();
    var V2 = $('.d2').find(":selected").text();
    var V3 = $('.d3').find(":selected").text();
    var V4 = $('.d4').find(":selected").text();

    $('select option').prop('disabled',false); // reset everything

    $('.d1, .d2, .d3, .d4').children().each(function (index, element) {
        if ($(element).text() == V1) {
            $(this).prop('disabled', true);
        }
        if ($(element).text() == V2) {
            $(this).prop('disabled', true);
        }
        if ($(element).text() == V3) {
            $(this).prop('disabled', true);
        }
        if ($(element).text() == V4) {
            $(this).prop('disabled', true);
        }

    });
  });
});

Demo

【讨论】：

【解决方案2】：

如果您的选择列表都相同，您可以根据它们的索引禁用：

$(document).ready(function () {

    var $select = $('.d1, .d2, .d3, .d4').change(function () {
        $select.find('option').prop('disabled', false); //All option enabled
        $select.each(function(){
            var $this = $(this), index = $this.find(':selected').index(); //Get the index
            $select.not(this).find('option:nth-child('+ (index+1) +')').prop('disabled', true); //Select option base on their position and disable them


        })
    });

});

小提琴：http://jsfiddle.net/u6eCL/16/

否则，这里是基于文本的代码：

$(document).ready(function () {

    var $select = $('.d1, .d2, .d3, .d4').change(function () {
        $select.find('option').prop('disabled', false); //All option enabled
        $select.each(function(){
            var $this = $(this), text = $this.find(':selected').text(); //Get the text
            $select.not(this).find('option').filter(function(){
                return $(this).text() === text
            }).prop('disabled', true); //Select option base on their text and disable them


        })
    });

});

http://jsfiddle.net/u6eCL/15/

【讨论】：

【解决方案3】：

在更改处理程序的第一行中的所有 <option> 元素上将 disabled 设置为 false。然后，遍历每个<select> 并禁用兄弟<select>s 中的任何<option>s，其中this.value 匹配：

var $select = $('.d1, .d2, .d3, .d4');

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

    $select.find('option').prop('disabled', false);

    $select.each(function() {
        $(this).siblings('select').find('option')
               .filter('[value="' + this.value + '"]').prop('disabled', true);
    });

});

Here's a fiddle

【讨论】：

我也考虑过，但他的选择没有价值（即使他们应该这样做）。
@Karl-AndréGagnon 如果没有明确定义该值，则使用元素的文本内容
是的，你是对的，我知道，但我不知道 [value] 选择器会起作用，因为它们没有作为属性放置。但它确实，不知何故，+ 1。顺便说一句，你在d3, d4之前少了一个点。
@Karl-AndréGagnon 我自己也不确定，我认为 jQuery 在内部做了一些事情。感谢您指出错字顺便说一句：p
@Karl-AndréGagnon 找到它：elem[ name ] != null ? elem[ name ] : elem.getAttribute( name );

【解决方案4】：

尝试：

        $(this).attr('disabled', 'disabled');

而不是

        $(this).prop('disabled', true);

【讨论】：

【解决方案5】：

试试这个脚本。它的工作原理是将“先前”值的索引存储在焦点上，然后在循环禁用新值时将其设置为不禁用。

请记住，只有在所有选项的顺序相同时，才可以使用索引。

jsFiddle

$(document).ready(function () {

    var origIndex;

    $('.d1, .d2, .d3, .d4').focus(function() {
        origIndex = $(this).find(":selected").index();
    }).change(function () {
        var index = $(this).find(":selected").index();

        $('.d1, .d2, .d3, .d4').each(function() {
            $(this).children().eq(index).prop("disabled", true);
            $(this).children().eq(origIndex).prop("disabled", false);
        });

    });

});

【讨论】：

【解决方案6】：

这是一个解决方案，它不是禁用选项而是删除它们。后续更改也会更新。

我为每个元素添加了额外的类ref_select，并为每个选项添加了value

$(function () {
    var $ref_select = $('.ref_select');
    /* cache option html */
    var optHtml = $ref_select.first().html();

    $ref_select.on('change', function () {
        /* make array of all selected values*/
        var selecteds=$ref_select.find('option:selected').map(function(){               
               return this.value                
        }).get();
        /* rebuild the other select elements*/
        $ref_select.not(this).each(function(){
            var selVal=this.value || '';
            /* create new set of options with filtered values*/ 
            var $opts=$(optHtml).filter(function(){
                return $.inArray(this.value,selecteds) ==-1 ||  this.value ==selVal
            });
            /* replace children*/
           $(this).html($opts).val(selVal);

        });
    });
});

DEMO

【讨论】：

【解决方案7】：

已经有很多答案（还有两个很好的答案），但我正忙于创建自己的版本，所以无论如何我都会发布它；）我通过选择 select 输入使其更加灵活名称和值选项。

HTML

First referee:
<select name="d1">
    <option value="1">One</option>
    <option value="2">Two</option>
    <!-- and so on -->
</select>

Second referee:
<select name="d2">
    <!-- same options here -->
</select>

<!-- even more dropdowns here -->

Javascript

这里的关键是在更改之前将“旧”值存储在某处，以便您可以重新启用其他下拉菜单中的选项。

$('select[name^="d"]').focus(function(){
    // Store the current value in the data attribute, for use later (whenever it's actually changed)
    $(this).data('previouslySelected', $(this).val());
}).change(function () {
    // Grab current (new) and old value (see focus event)
    var currentValue = $(this).val();
    var oldValue = $(this).data('previouslySelected');

    // Select all select inputs, but NOT the current one
    $('select[name^="d"]').not(this).each(function(i, e) {
        // disable currently selected
        var opt = $('option[value="' + currentValue + '"]', this).prop('disabled', true);
        // re-enable previously selected item
        $('option[value="' + oldValue + '"]', this).prop('disabled', false);
    });
});

当然，here is the fiddle ;)

【讨论】：

【解决方案8】：

试试这个可能会奏效

$(document).ready(function () {

    $('.d1, .d2, .d3, .d4').change(function () {
        var V1 = $('.d1').find(":selected").text();
        var V2 = $('.d2').find(":selected").text();
        var V3 = $('.d3').find(":selected").text();
        var V4 = $('.d4').find(":selected").text();

        $('.d1, .d2, .d3, .d4').children().each(function (index, element) {
            if ($(element).text() == V1 ) {
                $(this).prop('disabled', true).siblings().removeAttr('disabled');;
            }
            if ($(element).text() == V2) {
                $(this).prop('disabled', true).siblings().removeAttr('disabled');;
            }
            if ($(element).text() == V3) {
                $(this).prop('disabled', true).siblings().removeAttr('disabled');;
            }
            if ($(element).text() == V4) {
                $(this).prop('disabled', true).siblings().removeAttr('disabled');;
            }


        });
    });

});

【讨论】：