Javascript 根据选择字段切换禁用按钮

问题:

我有一个带有输入字段的模式窗口，一旦填写，就会触发一个禁用的保存按钮。现在，我想将一个选择框集成到这个模式中，而不是普通的文本输入，并且不知道如何让脚本识别它们，因为它不是真正的文本输入，而是一个选择框。在添加选择框之前，我这里有一个工作代码示例：

问题:

我需要在脚本中放置什么才能使用选择字段而不是输入字段？我认为这可能与告诉它寻找来自文本输入的变量，而不是来自选择的选项有关。这是我想要工作的一个例子：

---

谢谢

您需要使用更改事件来了解select字段的值何时发生更改，而不是侦听keyup事件

---

$.field select.changefunction{…

您需要使用change事件来了解select字段的值何时发生更改，而不是侦听keyup事件

$.field select.changefunction{

您无法侦听keyup事件，因为元素的使用方式与元素不同。要侦听所选选项中的更改，您需要使用.change事件。 无法在上使用占位符=属性，因为元素默认情况下将选择第一个子元素。请将此更改为将第一个选项设置为“请选择”或类似选项。 您必须检查a的所选选项，以查看该值是否为空。为此，您必须使用$'select'。find'option:selected'。val==。 完整代码：

HTML:

链接到bootply：

您无法侦听keyup事件，因为元素的使用方式与元素不同。要侦听所选选项中的更改，您需要使用.change事件。 无法在上使用占位符=属性，因为元素默认情况下将选择第一个子元素。请将此更改为将第一个选项设置为“请选择”或类似选项。 您必须检查a的所选选项，以查看该值是否为空。为此，您必须使用$'select'。find'option:selected'。val==。 完整代码：

HTML:

---

指向bootply的链接：

请发布您的代码。您可以对选择框使用.change事件处理程序，就像您对文本输入所做的那样。正如Barmar所说，您的代码没有那么大，您可以将HTML部分拆分为仅与表单相关的部分，甚至只与输入相关的部分。请发布您的代码。您可以使用.change事件处理程序一个选择框，就像你对文本输入所做的那样。正如Barmar所说，你的代码并没有那么大，你可以将HTML部分剥离到相关部分，比如表单，甚至只是输入

<div class="col-md-4">
  <div class="panel panel-default">
    <div class="panel-heading">Title</div>
    <div class="panel-body">
      <form role="form">
        <div class="form-group">
          <label for="name">Name:</label>
          <input type="text" class="form-control" id="projectName" value="Johnny Appleseed" style="display: inline; width: 325px;">
        </div>
        <div class="cloudcontainer">
          <!-- NEW FIELD ADDED HERE -->
        </div>
        <a href="#myModal" role="button" class="btn btn-default" data-toggle="modal">Add New Field</a>
      </form>
    </div>
  </div>
</div>
<!-- MODAL -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">New Field</h3>
      </div>
      <div class="modal-body">
        <form role="form">
          <div class="field">
            <label>State:</label>
            <select id="fieldtitle">
              <option value="">Enter State</option>
              <option value="AL">Alabama</option>
              <option value="AL">Alaska</option>
              <option value="AL">Arkansas</option>
            </select>
            <br>
            <br>
            <label>City:</label>
            <select id="fieldtitle">
              <option value="">Enter City</option>
              <option value="BR">Burmingham</option>
              <option value="JN">Juneau</option>
              <option value="LR">Little Rock</option>
            </select>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" id="clickme" disabled="disabled" data-dismiss="modal">Save changes</button>
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
      </div>
    </div>
  </div>
</div>

$(document).ready(function(){

    $(".field select").change(function(){
        var empty = false;
        $(".field select").each(function(){
            if ($(this).find('option:selected').val() == "") {
                empty = true;
            }
        });

        if(empty) {
            $("#clickme").attr('disabled', 'disabled');
        } else {
            $("#clickme").attr('disabled', false);
        }

    });

});