Кнопка переключения инвалидов зависит от выбора поля

Question

Выпуск.

У меня есть модальное окно с полями ввода, которые вызывают нетрудоспособный кнопку сохранить после заполнения в Теперь я хочу, чтобы интегрировать отборное окно в этот модальный вместо нормальные текстовые входы и не могут понять, как заставить скрипт распознавать их, поскольку это не истинный ввод текста, это выбор. У меня есть пример здесь рабочий код перед добавлением выбора коробки: DEMO

Вопрос:

Что мне нужно поместить в моем сценарии, чтобы иметь возможность использовать выбор пола вместо ввода поля? Я думаю, что это может иметь какое-то отношение к тому, чтобы говорить о том, чтобы искать переменную, поступающую из текстового ввода, а не из опции, выбранной из выбранного. Это пример того, что я хочу работать: DEMO

Спасибо!

Answer 1

1. Вы не можете слушать keyup событие, как <select></select> элементы не используют это таким же образом, как <input></input> элементов. Чтобы прослушать изменение выбранного параметра, вам необходимо использовать событие .change().
2. Вы не можете использовать атрибут placeholder="" на <select></select>, так как элемент будет выбирать по умолчанию первый <option></option> ребенок. Измените это на первый вариант как <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); 
     } 

    }); 

}); 

Ссылка на bootply: http://www.bootply.com/1cpZMLBuwv

Answer 2

Для прослушивания события keyup необходимо использовать событие change, чтобы узнать, когда изменилось значение полей выбора.

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