当多个下拉值等于特定值时禁用提交按钮

Question

当所有下拉菜单都设置为相同的特定值（起始/默认值）时，我正在尝试禁用表单上的提交按钮。

该页面包含一个表单，用户在其中一个下拉菜单上选择一个选项（但不能一次选择两个下拉菜单），然后按下提交按钮以根据该选择生成一个文档。

下拉列表和提交按钮如下所示：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $('#drop1').change(function() {
    if ($('#drop1').val() == 'select' && $('#drop2').val() == 'select') {
      $('#subsubmit').attr("disabled", true);
    }
  });

  $('#drop2').change(function() {
    if ($('#drop1').val() == 'select' && $('#drop2').val() == 'select') {
      $('#subsubmit').attr("disabled", true);
    }
  });
</script>
<select name="drop1" ID="drop1" class="form-control">
  <option class="dropdown-item" name="select" value="select">Select From Below</option>
  <option class="dropdown-item" name='thing1' value="thing1">thing1</option>
  <option class="dropdown-item" name='thing2' value="thing2">thing2</option>
</select>

<select name="drop2" ID="drop2" class="form-control">
  <option class="dropdown-item" name="select" value="select">Select From Below</option>
  <option class="dropdown-item" name='thing3' value="thing3">thing3</option>
  <option class="dropdown-item" name='thing4' value="thing4">911</option>
</select>

<input class="btn btn-primary" type="submit" id="subsubmit" value="Generate">

我正在尝试这样做，如果所有下拉菜单都设置为“选择”（默认/启动选项），则提交按钮被禁用。

我使用它来确保在两个下拉菜单之间只选择一个选项：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $('#drop1').change(function() {
    $('#drop2').prop('selectedIndex', 0);
  });


  $('#drop2').change(function() {
    $('#drop1').prop('selectedIndex', 0);
  });
</script>
<select name="drop1" ID="drop1" class="form-control">
  <option class="dropdown-item" name="select" value="select">Select From Below</option>
  <option class="dropdown-item" name='thing1' value="thing1">thing1</option>
  <option class="dropdown-item" name='thing2' value="thing2">thing2</option>
</select>

<select name="drop2" ID="drop2" class="form-control">
  <option class="dropdown-item" name="select" value="select">Select From Below</option>
  <option class="dropdown-item" name='thing3' value="thing3">thing3</option>
  <option class="dropdown-item" name='thing4' value="thing4">911</option>
</select>

<input class="btn btn-primary" type="submit" id="subsubmit" value="Generate">

如果另一个菜单被更改，这会将一个菜单设置回默认值，反之亦然。

我希望它能够工作，看起来应该，但它没有 - 可能是因为我真的不知道如何使用 jquery：

在我看来应该是这样的：1）改变任一下拉； 2）检查每个下拉列表的值是否设置为'select'；和 3) 如果它们都是，请禁用提交按钮 - 但它似乎没有做任何事情。

理想情况下，我希望它可以与 3 或 4 个下拉菜单一起使用，但即使使用这两个也无法获得所需的效果。关于如何解决这个问题的任何建议，或者我应该尝试的其他事情？

Answer 1

• 您可以为所有<select> 使用class 而不是id，然后只为它们使用一个change 处理程序

• ^[1] 使用.filter() 和.length 获取具有select 值的其他<select> 的长度

• ^[2] 使用 .prop() 和简写 if 语句 () ? : 切换 disabled

• ^[3]将所有其他<select>返回到select值

• ^[4]最后你可以在最后使用.change()来运行change事件onload

^{请阅读下面代码中的//comments}

$('.drop-select').change(function(){
    var AnotherSelected = $(".drop-select").not(this).filter(function(){
        return this.value == "select";
    }).length; // get the number of select which has 'select' value
    $('#subsubmit').prop("disabled", AnotherSelected > 0 && this.value == 'select' ? true : false);  // toggle the disabled when all select value = 'select'
    $('.drop-select').not(this).val("select"); // return all other select to 'select' value
}).change();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="drop1" class="form-control drop-select">
<option class="dropdown-item" name="select" value="select">Select From Below</option>
<option class="dropdown-item" name='thing1' value="thing1">thing1</option>
<option class="dropdown-item" name='thing2' value="thing2">thing2</option>
</select>

<select name="drop2" class="form-control drop-select">
<option class="dropdown-item" name="select" value="select">Select From Below</option>
<option class="dropdown-item" name='thing3' value="thing3">thing3</option>
<option class="dropdown-item" name='thing4' value="thing4">911</option>
</select>

<select name="drop3" class="form-control drop-select">
<option class="dropdown-item" name="select" value="select">Select From Below</option>
<option class="dropdown-item" name='thing1' value="thing5">thing5</option>
<option class="dropdown-item" name='thing2' value="thing6">thing6</option>
</select>

<select name="drop4" class="form-control drop-select">
<option class="dropdown-item" name="select" value="select">Select From Below</option>
<option class="dropdown-item" name='thing3' value="thing7">thing7</option>
<option class="dropdown-item" name='thing4' value="thing8">thing8</option>
</select>
<input class="btn btn-primary" type="submit" id="subsubmit" value="Generate">