Question

在我的页面中，提示按钮被禁用，直到点击了数据列表中的选项，然后才允许用户提交。我尝试了点击，并更改了功能，但没有一个工作。

这是我的剧本：

<script type="text/javascript">
$(document).ready(function()
{ 
  $('#searchButton').attr("disabled", true);
  $('#staffid').change(function()
    {
    $('#searchButton').attr("disabled", false);
    });
});
</script>

这是我的表格：

<form method="post" action="">
      {{ csrf_field() }}
    <div class="box-body row">
         <div class="form-group col-md-10">
           <input list="staffid" id="searchBox" name="searchBox" class="form-control input-lg"  placeholder="Search By First Name, Surname or File Number">
           <datalist id="staffid">
              @foreach ($staffList as $b)
              <option value="{{ $b->fileNo }}" >{{ $b->fileNo }}:{{ $b->surname }} {{ $b->first_name }}</option>
              @endforeach
            </datalist>
           <input type="hidden" id="fileNo"  name="fileNo">
           <span style="color: #999;">(If you don't see name suggestion after typing to the above text field, please refresh your page.)</span>
        </div>
        <div class="col-md-2">
          <button type="submit" name="searchButton" id="searchButton" class="btn btn-default btn-lg"><i class="fa fa-search"></i> Search</button>
    </div>
  </form>

Answer 1

应该是#searchbox而不是#staffid

＆＃13;

$(document).ready(function() {
  $('#searchButton').attr("disabled", true);
  $('#searchBox').change(function() {
    $('#searchButton').attr("disabled", false);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="">
  <div class="box-body row">
    <div class="form-group col-md-10">
      <input list="staffid" id="searchBox" name="searchBox" class="form-control input-lg" placeholder="Search By First Name, Surname or File Number">
      <datalist id="staffid">
              <option value="1" >Test</option>
            </datalist>
      <input type="hidden" id="fileNo" name="fileNo">
      <span style="color: #999;">(If you don't see name suggestion after typing to the above text field, please refresh your page.)</span>
    </div>
    <div class="col-md-2">
      <button type="submit" name="searchButton" id="searchButton" class="btn btn-default btn-lg"><i class="fa fa-search"></i> Search</button>
    </div>
</form>

＆＃13;

单击数据列表中的选项时的JQuery事件

1 个答案: