如何使用 jquery 启用/禁用提交按钮的列表中的多个下拉列表中仅 select 一个下拉列表？

Question

我正在尝试在 table 中使用提交按钮创建多个下拉菜单，该按钮应该只允许 select 一个下拉选项。如果第二个下拉菜单是 selected 那么它应该弹出一条不允许的消息。

注意：当我在多个下拉列表中比较相同的选项时成功，但在比较不同的选项时失败。所以请解决这个问题。我试过这个url： http://jsfiddle.net/dvtk974d/

$(document).ready(function() {
  $('#table1 tr').each(function() {
    $(this).find('select').change(function() {
      //alert($(this).val());
      $("#btSubmit").removeAttr("disabled");
      if ($(this).val() == 'action') {
        $("#btSubmit").prop('disabled', true);
      }
      if ($('#table1').find('select    option[value=' + $(this).val() + ']:selected').length > 1 && $(this).val() !== "action") {

        alert('option is already selected');
        $(this).val($(this).find("option:first").val());
      }
    });
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h3> Table 1</h3>

<table id="table1" border="1">
  <tr>
    <td>select any action</td>
    <td>
      <select>
        <option value="action">--Action--</option>
        <option value="one">One</option>
        <option value="two">Two</option>
        <option value="three">Three</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>select any action</td>
    <td>
      <select>
        <option value="action">--Action--</option>
        <option value="one">One</option>
        <option value="two">Two</option>
        <option value="three">Three</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>select any action</td>
    <td>
      <select>
        <option value="action">--Action--</option>
        <option value="one">One</option>
        <option value="two">Two</option>
        <option value="three">Three</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>select any action</td>
    <td>
      <select>
        <option value="action">--Action--</option>
        <option value="one">One</option>
        <option value="two">Two</option>
        <option value="three">Three</option>
      </select>
    </td>
  </tr>
</table>
<br/>
<input type="submit" value="Submit" title="Submit" name="submit" class="btn" id="btSubmit" disabled="disabled">
<br>

Answer 1

Select 所有 select 元素，然后用 .not(this) 排除当前并禁用它们。如果用户再次选择 "action"，您可以重新启用它们。 Fiddle: http://jsfiddle.net/ilpo/dvtk974d/3/

Answer 2

作为 alert 的替代方法，您可以使用：

DEMO

$(document).ready(function () {
    var globalSelect=false;
    $('#table1 tr').each(function () {
        $(this).find('select').change(function () {
            //alert($(this).val());
            if(globalSelect)
            {
                if ($(this).val() == 'action') {// need to check here
                       $("#btSubmit").prop('disabled', true);
                       return;
                }
                alert('Option already selected');
                $(this).val($(this).find("option:first").val());
                return false;
            }
            $("#btSubmit").removeAttr("disabled");
            if ($(this).val() == 'action') {
                 $("#btSubmit").prop('disabled', true);
                 globalSelect=false;
            }
            else
            {
                globalSelect=true;
            }
        });
    });
});

如何使用 jquery 启用/禁用提交按钮的列表中的多个下拉列表中仅 select 一个下拉列表？

How to select only one dropdown from multiple dropdowns in a list with submit button enable /disable using jquery?

jquery

drop-down-menu