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

Question

I tried this but it's not working.

 $('#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

You should use disable='disabled' and disabled='' instead of true / false , though using jQuery it will work with both

And with jQuery you should use .prop instead of .attr

\n

 $('#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>

\n

Update

Did you add the jQuery library to your solution? ... If I do that on your existing code it actually does work as is, as you can see in below sample

 $('#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

You can use return in your function once when it hits a input box with an empty value instead of keep looking through and changing the that disable variable

 $('#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); } }); });

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