如果输入为空，如何不能单击按钮

Question

我编码遵循这个但它不起作用。

HTML

<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>

的javascript

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

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>

Answer 2

您可以在函数中使用return一次，当它遇到一个空值的输入框，而不是一直查看并更改disable变量

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;