Javascript 按钮禁用，除非两个输入字段都有值_Javascript_Jquery_Jquery Ui_Javascript Events

Javascript 按钮禁用，除非两个输入字段都有值

javascript jquery jquery-ui

Javascript 按钮禁用，除非两个输入字段都有值,javascript,jquery,jquery-ui,javascript-events,Javascript,Jquery,Jquery Ui,Javascript Events,我的页面上有一个带有两个输入字段和一个提交按钮的表单，我希望“提交”按钮被禁用，直到两个输入字段上都有值为止。也就是说，当且仅当两个字段中都有输入值时，按钮才可单击如何用js和jQuery实现这一点这是我的页面： <html> <body> <form method=post> <input type=text id='first_name'> <input type=text id='second

我的页面上有一个带有两个输入字段和一个提交按钮的表单，我希望“提交”按钮被禁用，直到两个输入字段上都有值为止。也就是说，当且仅当两个字段中都有输入值时，按钮才可单击

如何用js和jQuery实现这一点

这是我的页面：

<html>
<body>
    <form method=post>
        <input type=text id='first_name'>
        <input type=text id='second_name'>
        <input type=submit value=Submit>
    </form>
</body>
</html>

我想要js和jQuery解决方案

jQuery：

纯JS：

<html>
<body>
    <form method="POST" 
     onsubmit="return this.first_name.value!='' && this.second_name.value!=''">
        <input type="text" id="first_name" name="first_name"
        onkeyup="this.form.subbut.disabled = this.value=='' || this.form.second_name.value==''">
        <input type="text" id="second_name" name"second_name"
        onkeyup="this.form.subbut.disabled = this.value=='' || this.form.first_name.value==''">

        <input type="submit" value="Submit" disabled="disabled">
    </form>
</body>
</html>

下面是一个使用jQuery的解决方案：

HTML（请注意，我在submit按钮中添加了一个id）：

工作示例：

不要忘记表单字段的

name

属性

<html>
<head>
<script type="text/javascript" src="path.to/jquery.js" />
<script type="text/javascript">
$(function() { // on document load

   var fn = function() {
      var disable = true;
      $('#myForm input[type:text]').each(function() { // try to find a non-empty control
          if ($(this).val() != '') {
             disable = false;
          }
      });

      $('#myForm input[type:submit]').attr('disabled', disable);
   }

   $('#myForm input[type:text]').change(fn); // when an input is typed in
   fn(); // set initial state
});
</script>
<body>
    <form id="myForm" method="POST">
        <input type="text" id="first_name">
        <input type="text" id="second_name">
        <input type="submit" value="Submit">
    </form>
</body>
</html>


$（加载文档时函数（）{//
var fn=函数（）{
var disable=true；
$（'#myForm input[type:text]'）。每个（function（）{//尝试查找非空控件
if（$（this.val（）！=“”）{
禁用=错误；
}
});
$（'#myForm input[type:submit]'）.attr（'disabled'，disabled）；
}
$（“#myForm input[type:text]”）。更改（fn）；//当键入输入时
fn（）；//设置初始状态
});

谢谢，用纯jQuery如何？@Mellon请查看更新。你的jQuery问题是重复的，我想你忘了给出提交按钮的名称。应该是这样的，对吗？但是在我填写了这两个字段之后，我必须单击其他地方来启用按钮，按钮不会自动激活。你是对的，我只是更新了解决方案，并将

.change（function（）…

）更改为

.keyup（function（）…

。现在应该可以了。JSFIDLE示例也更新了。

$(':text').keyup(function() {
    if($('#first_name').val() != "" && $('#second_name').val() != "") {
       $('#submit').removeAttr('disabled');
    } else {
       $('#submit').attr('disabled', true);   
    }
});

<html>
<head>
<script type="text/javascript" src="path.to/jquery.js" />
<script type="text/javascript">
$(function() { // on document load

   var fn = function() {
      var disable = true;
      $('#myForm input[type:text]').each(function() { // try to find a non-empty control
          if ($(this).val() != '') {
             disable = false;
          }
      });

      $('#myForm input[type:submit]').attr('disabled', disable);
   }

   $('#myForm input[type:text]').change(fn); // when an input is typed in
   fn(); // set initial state
});
</script>
<body>
    <form id="myForm" method="POST">
        <input type="text" id="first_name">
        <input type="text" id="second_name">
        <input type="submit" value="Submit">
    </form>
</body>
</html>

$(function(){
  $("#first_name, #second_name").bind("change keyup",
  function(){
     if($("#first_name").val() != "" && $("#second_name").val() != "")
        $(this).closest("form").find(":submit").removeAttr("disabled");
     else
        $(this).closest("form").find(":submit").attr("disabled","disabled"); 
  });
});