Question

问题：

我有一个带有输入字段的模态窗口，一旦填写就触发了一个禁用的保存按钮。我现在想要将一个选择框集成到这个模态而不是普通的文本输入中，并且无法弄清楚如何将脚本添加到认识到他们看到它不是真正的文本输入，它是一个选择。我在这里添加了一个选择框之前的工作代码示例：DEMO

问题：

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

谢谢！

Answer 1

您无法收听keyup事件，因为<select></select>元素与<input></input>元素的使用方式不同。要收听所选选项的更改，您需要使用.change()事件。
您无法在placeholder=""上使用<select></select>属性，因为该元素默认会选择第一个<option></option>子项。将此更改为第一个选项为<option val="">Please Select</option>或类似。
您必须检查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);
        }

    });

});

链接到bootply：http://www.bootply.com/1cpZMLBuwv

Answer 2

您需要使用keyup事件来了解选择字段的值何时发生变化，而不是收听change事件。

$(".field select").change(function(){ ...

切换禁用按钮取决于选择字段

2 个答案: