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）检查每个下拉菜单的值是否设置为“选择”；和3）如果两者都是，请禁用“提交”按钮-但这似乎没有任何作用。

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

Answer 1

您可以对所有class使用<select>而不是id，然后仅对它们使用一个change处理程序
^[1]使用<select>和{获取其他具有select值的.filter()的长度{1}}
^[2]使用.length切换disabled和if语句.prop()
< / li>
^[3]将所有其他() ? :返回到<select>值
^[4]最后，您可以在末尾使用select来运行.change()事件onload
< / li>

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

//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();

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

1 个答案: