javascript - 当输入字段为空时如何禁用按钮？

Question

我试过了，但没用。

$('#booking').attr('disabled', true);
$('input:text').keyup(function() {
  var disable = false;
  
  $('input:text').each(function() {
    if ($(this).val() == "") {
      disable = true;
    }
  });
  $('#booking').prop('disabled', disable);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="<?php echo site_url('home/program/booking');?>" method="post">
  <div class="form-group">
    <label class="col-sm-2 control-label">Tour </label>
    <div class="col-sm-10">
      <input class="form-control" id="tour" name="tour" type="text">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">Firstname </label>
    <div class="col-sm-10">
      <input class="form-control" id="firstname" type="text" value="">
    </div>
  </div>
  <button id="booking" type="submit" class="btn btn-default">OK</button>
</form>

Answer 1

您应该使用disable='disabled'和disabled=''而不是true/false ，尽管使用 jQuery 它可以同时使用

对于 jQuery，你应该使用 .prop而不是.attr

<罢工>

$('#booking').attr('disabled', 'disabled');
$('input').keyup(function() {
  var d = '';
  $('input').each(function() {
    if ($(this).val() == "") {
      d = 'disabled';
    }
  });
  $('#booking').prop('disabled', d);  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="<?php echo site_url('home/program/booking');?>" method="post">
  <div class="form-group">
    <label class="col-sm-2 control-label">Tour</label>
    <div class="col-sm-10">
      <input class="form-control" id="tour" name="tour" type="text">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">Firstname</label>
    <div class="col-sm-10">
      <input class="form-control" id="firstname" type="text" value="">
    </div>
  </div>
  <button id="booking" type="submit" class="btn btn-default">OK</button>
</form>

<罢工>

更新

您是否将 jQuery 库添加到您的解决方案中？ ...如果我在您现有的代码上执行此操作，它实际上会按原样工作，如下面的示例所示

$('#booking').prop('disabled', true);
$('input:text').keyup(function() {
  var disable = false;
  $('input:text').each(function() {
    if ($(this).val() == "") {
      disable = true;
    }
  });
  $('#booking').prop('disabled', disable);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="<?php echo site_url('home/program/booking');?>" method="post">
  <div class="form-group">
    <label class="col-sm-2 control-label">Tour</label>
    <div class="col-sm-10">
      <input class="form-control" id="tour" name="tour" type="text">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">Firstname</label>
    <div class="col-sm-10">
      <input class="form-control" id="firstname" type="text" value="">
    </div>
  </div>
  <button id="booking" type="submit" class="btn btn-default">OK</button>
</form>