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

Question

问题:

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

问题:

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

谢谢!

Answer 1

1. 您无法收听keyup事件为<select></select>元素不会以与 <input></input> 相同的方式使用它元素。为了监听所选选项的更改，您需要使用 .change()事件。
2. 您不能使用placeholder="" <select></select> 上的属性因为该元素默认会选择第一个 <option></option> child 。将其更改为第一个选项 <option val="">Please Select</option>或类似内容。
3. 您必须检查所选的 option的<select></select>以查看该值是否为空。为此，您必须使用 $('#select').find('option:selected').val() == "") .

完整代码:

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>

JS:

$(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);
        }

    });

});

Bootstrap 链接:http://www.bootply.com/1cpZMLBuwv