Javascript jQuery禁用/启用提交按钮

我有这个HTML：

<input type="text" name="textField" />
<input type="submit" value="send" />

---

…但它不起作用。有什么想法吗？

问题在于，只有当焦点从输入中移开时（例如，有人单击关闭输入或从输入中弹出标签），更改事件才会触发。请尝试改用keyup：

$(function() {
  $(":text").keypress(check_submit).each(function() {
    check_submit();
  });
});

function check_submit() {
  if ($(this).val().length == 0) {
    $(":submit").attr("disabled", true);
  } else {
    $(":submit").removeAttr("disabled");
  }
}

$(document).ready(function() {
     $(':input[type="submit"]').prop('disabled', true);
     $('input[type="text"]').keyup(function() {
        if($(this).val() != '') {
           $(':input[type="submit"]').prop('disabled', false);
        }
     });
 });

---

问题在于，更改事件仅在焦点从输入移开时触发（例如，有人单击关闭输入或将选项卡移出输入）。请尝试改用keyup：

$(document).ready(function() {
     $(':input[type="submit"]').prop('disabled', true);
     $('input[type="text"]').keyup(function() {
        if($(this).val() != '') {
           $(':input[type="submit"]').prop('disabled', false);
        }
     });
 });

---

eric，当用户输入文本然后删除所有文本时，您的代码似乎对我不起作用。如果有人遇到同样的问题，我会创建另一个版本。大家好：

$('input[type="submit"]').attr('disabled','disabled');
$('input[type="text"]').keyup(function(){
    if($('input[type="text"]').val() == ""){
        $('input[type="submit"]').attr('disabled','disabled');
    }
    else{
        $('input[type="submit"]').removeAttr('disabled');
    }
})

---

eric，当用户输入文本然后删除所有文本时，您的代码似乎对我不起作用。如果有人遇到同样的问题，我会创建另一个版本。大家好：

$('input[type="submit"]').attr('disabled','disabled');
$('input[type="text"]').keyup(function(){
    if($('input[type="text"]').val() == ""){
        $('input[type="submit"]').attr('disabled','disabled');
    }
    else{
        $('input[type="submit"]').removeAttr('disabled');
    }
})

---

以下是文件输入字段的解决方案

要在未选择文件时禁用文件字段的提交按钮，然后在用户选择要上载的文件后启用：

$(document).ready(function(){
    $("#submitButtonId").attr("disabled", "disabled");
    $("#fileFieldId").change(function(){
        $("#submitButtonId").removeAttr("disabled");
    });
});

Html:

true do%>“text/csv”，：id=>“fileFieldId”%%>“submitButtonId”%%>

以下是文件输入字段的解决方案

要在未选择文件时禁用文件字段的提交按钮，然后在用户选择要上载的文件后启用：

$(document).ready(function(){
    $("#submitButtonId").attr("disabled", "disabled");
    $("#fileFieldId").change(function(){
        $("#submitButtonId").removeAttr("disabled");
    });
});

Html:

true do%>“text/csv”，：id=>“fileFieldId”%%>“submitButtonId”%%>

或者对于我们这些不喜欢在每件小事上使用jQ的人：

document.getElementById("submitButtonId").disabled = true;

---

或者对于我们这些不喜欢在每件小事上使用jQ的人：

document.getElementById("submitButtonId").disabled = true;

---

您也可以使用类似以下内容：

$(document).ready(function() {
    $('input[type="submit"]').attr('disabled', true);
    $('input[type="text"]').on('keyup',function() {
        if($(this).val() != '') {
            $('input[type="submit"]').attr('disabled' , false);
        }else{
            $('input[type="submit"]').attr('disabled' , true);
        }
    });
});

---

这里是

您也可以使用类似的内容：

$(document).ready(function() {
    $('input[type="submit"]').attr('disabled', true);
    $('input[type="text"]').on('keyup',function() {
        if($(this).val() != '') {
            $('input[type="submit"]').attr('disabled' , false);
        }else{
            $('input[type="submit"]').attr('disabled' , true);
        }
    });
});

---

这里是

这个问题已经2年了，但它仍然是一个好问题，这是谷歌的第一个结果。。。但是所有现有的答案都建议设置并删除HTML属性（removeAttr（“disabled”））“disabled”，这不是正确的方法。关于属性和属性，有很多混淆

HTML 标记中

中的“已禁用”

HTML与DOM 引述：

一个属性在DOM中；HTML中有一个属性被解析为DOM

JQuery 相关的：

然而，关于checked属性，要记住的最重要的概念是它与checked属性不对应。属性实际上对应于defaultChecked属性，仅用于设置复选框的初始值。选中的属性值不会随复选框的状态而更改，而选中的属性会随复选框的状态而更改。因此，跨浏览器兼容的确定是否选中复选框的方法是使用属性

相关：

属性通常会影响DOM元素的动态状态，而不会更改序列化的HTML属性。示例包括输入元素的值属性、输入和按钮的禁用属性或复选框的选中属性应该使用.prop（）方法来设置禁用和选中，而不是.attr（）方法。

总结 要[…]更改DOM属性，如表单元素的[…]禁用状态，请使用该方法。

（）

---

至于问题的“更改时禁用”部分：有一个名为“输入”的事件，但它不是jQuery事件，因此jQuery无法使其工作。更改事件工作可靠，但在元素失去焦点时触发。因此，可以将两者结合起来（有些人也会收听keyup和paste）

下面是一段未经测试的代码来说明我的意思：

$(document).ready(function() {
    var $submit = $('input[type="submit"]');
    $submit.prop('disabled', true);
    $('input[type="text"]').on('input change', function() { //'input change keyup paste'
        $submit.prop('disabled', !$(this).val().length);
    });
});

---

这个问题已经2年了，但它仍然是一个好问题，这是谷歌的第一个结果。。。但是所有现有的答案都建议设置并删除HTML属性（removeAttr（“disabled”））“disabled”，这不是正确的方法。关于属性和属性，有很多混淆

HTML 标记中

中的“已禁用”

HTML与DOM 引述：

一个属性在DOM中；HTML中有一个属性被解析为DOM

JQuery 相关的：

然而，关于checked属性，要记住的最重要的概念是它与checked属性不对应。属性实际上对应于defaultChecked属性，仅用于设置复选框的初始值。选中的属性值不会随复选框的状态而更改，而选中的属性会随复选框的状态而更改。因此，跨浏览器兼容的确定是否选中复选框的方法是使用属性

相关：

属性通常会影响DOM元素的动态状态，而不会更改序列化的HTML属性。示例包括输入元素的值属性、输入和按钮的禁用属性或复选框的选中属性应该使用.prop（）方法来设置禁用和选中，而不是.attr（）方法。

总结 要[…]更改DOM属性，如表单元素的[…]禁用状态，请使用该方法。

（）

---

至于问题的“更改时禁用”部分：有一个名为“输入”的事件，但它不是jQuery事件，因此jQuery无法使其工作。更改事件工作可靠，但在元素失去焦点时触发。因此，可以将两者结合起来（有些人也会收听keyup和paste）

下面是一段未经测试的代码来说明我的意思：

$(document).ready(function() {
    var $submit = $('input[type="submit"]');
    $submit.prop('disabled', true);
    $('input[type="text"]').on('input change', function() { //'input change keyup paste'
        $submit.prop('disabled', !$(this).val().length);
    });
});

---

上面的答案也没有提到检查基于菜单的剪切/粘贴事件。下面是我用来做这两件事的代码。请注意，该操作实际上是在超时的情况下发生的，因为cut和pass事件实际上是在更改发生之前触发的，所以timeout为该操作的发生提供了一点时间

$( ".your-input-item" ).bind('keyup cut paste',function() {
    var ctl = $(this);
    setTimeout(function() {
        $('.your-submit-button').prop( 'disabled', $(ctl).val() == '');
    }, 100);
});

那个

  $(document).ready(function() {
       $('#form_id button[type="submit"]').prop('disabled', true);

       $('#form_id input, #form_id select').keyup(function() {
          var disable = false;

          $('#form_id input, #form_id select').each(function() {
            if($(this).val() == '') { disable = true };
          });

          $('#form_id button[type="submit"]').prop('disabled', disable);
       });
  });

 $("input[type="submit"]", "#letter-form").on("click",
        function(e) {
             e.preventDefault();


$.post($("#letter-form").attr('action'), $("#letter-form").serialize(),
                 function(response) {// your response from form submit
                    if (response.result === 'Redirect') {
                        window.location = response.url;
                    } else {
                        Message(response.saveChangesResult, response.operation, response.data);
                    }
});
$(this).attr('disabled', 'disabled'); //this is what you want

<input type="text" name="textField" id="textField"/>
<input type="submit" value="send" id="submitYesNo"/>

$("#textField").change(function(){
  if($("#textField").val()=="")
    $("#submitYesNo").prop('disabled', true)
  else
    $("#submitYesNo").prop('disabled', false)
});

<form method="post" action="/login">
    <input type="text" id="email" name="email" size="35" maxlength="40" placeholder="Email" />
    <input type="password" id="password" name="password" size="15" maxlength="20" placeholder="Password"/>
    <input type="submit" id="send" value="Send">
</form>

$(document).ready(function() {    
    $('#send').prop('disabled', true);

    $('#email, #password').keyup(function(){

        if ($('#password').val() != '' && $('#email').val() != '')
        {
            $('#send').prop('disabled', false);
        }
        else
        {
            $('#send').prop('disabled', true);
        }
    });
});

if($(#name).val() != '') {
   $('input[type="submit"]').attr('disabled' , false);
}

$('input[type="email"]').keyup(function() {
    if ($(this).val() != '') {
        $(':button[type="submit"]').prop('disabled', false);
    } else {
        $(':button[type="submit"]').prop('disabled', true);
    }
});

$('input[type="submit"]').removeAttr('disabled');

jQuery(document).ready(function(){

    jQuery("input[type=submit]").prop('disabled', true);

    jQuery("input[name=textField]").focusin(function(){
        jQuery("input[type=submit]").prop('disabled', false);
    });

    jQuery("input[name=textField]").focusout(function(){
        var checkvalue = jQuery(this).val();
        if(checkvalue!=""){
            jQuery("input[type=submit]").prop('disabled', false);
        }
        else{
            jQuery("input[type=submit]").prop('disabled', true);
        }
    });

}); /*DOC END*/