Question

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

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);
            }


        });
    });

});

Answer 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

Answer 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/

Answer 3

将更改处理程序第一行中所有disabled元素的false设置为<option>。然后，循环遍历每个<select>并停用<option>匹配的兄弟<select>中的所有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

Answer 4

尝试：

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

而不是

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

Answer 5

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

我为每个元素添加了额外的课程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

Answer 6

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

请注意，使用索引仅在所有选项的顺序相同时才有效。

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);
        });

    });

});

Answer 7

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

<强> 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

这里的关键是存储＆＃34; old＆＃34;在更改之前某处的值，因此您可以在其他下拉列表上重新启用选项。

$('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 ;）

Answer 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');;
            }


        });
    });

});

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

8 个答案:

Demo

Here's a fiddle