Question

我有4个select输入，具有相同的选项。我试图禁用从这些选择之一中选择的任何选项。

<select name="homeTeams[]" onchange="check()">
    <option value="1">Team1</option>
    <option value="2">Team2</option>
    <option value="3">Team3</option>
    <option value="4">Team4</option>
</select>

<select name="homeTeams[]" onchange="check()">
    <option value="1">Team1</option>
    <option value="2">Team2</option>
    <option value="3">Team3</option>
    <option value="4">Team4</option>
</select>


<select name="awayTeams[]" onchange="check()">
    <option value="1">Team1</option>
    <option value="2">Team2</option>
    <option value="3">Team3</option>
    <option value="4">Team4</option>
</select>

<select name="awayTeams[]" onchange="check()">
    <option value="1">Team1</option>
    <option value="2">Team2</option>
    <option value="3">Team3</option>
    <option value="4">Team4</option>
</select>

我正在尝试禁用从其中一个选择器中选择的选项。我使用jQuery来做，但我无法获得基于发件人的价值。

Ex：如果用户从Select 1中选择了Team1，jQuery代码将禁用Select2和Select3以及Select4中的Team1选项。

  function check()
  {
      var a = $('select option:selected').val();
      alert(a);
  }

它给了我第一个选择的值。

任何想法？

Answer 1

这是我的解决方案 - 请注意“ - select - ”的“0”值，它允许取消选择任何值：

$('select').on('change', function() {
    var vals = {};
    $('select').each(function(i, el) {
        vals[el.value] = 1;
    });
    delete vals[0];

    $('option').prop('disabled', function() {
        return this.value in vals && this.value !== this.parentElement.value;
    });
});

演示http://jsfiddle.net/alnitak/Qq33g/

Answer 2

使用jQuery注册这样的事件处理程序：

$('select').change(function() {
    $(this).siblings('select')
           .find('option[value="' + $(this).val() + '"]')
           .attr('disabled', 'disabled');
    $(this).siblings('select')
           .find('option[value!="' + $(this).val() + '"]')
           .removeAttr('disabled');
});

这可能有用。我还没有测试过。

基于发送者的jQuery Selector

2 个答案: