我有这个HTML：
<input type="text" name="textField" />
<input type="submit" value="send" />
我该怎么做：
我试过这样的事情：
$(document).ready(function(){
$('input[type="submit"]').attr('disabled','disabled');
$('input[type="text"]').change(function(){
if($(this).val != ''){
$('input[type="submit"]').removeAttr('disabled');
}
});
});
......但它不起作用。有什么想法吗？
答案 0 :(得分：1101)
问题是只有当焦点从输入移开时才会触发更改事件（例如，有人点击输入或标签输出）。请尝试使用keyup：
$(document).ready(function() {
$(':input[type="submit"]').prop('disabled', true);
$('input[type="text"]').keyup(function() {
if($(this).val() != '') {
$(':input[type="submit"]').prop('disabled', false);
}
});
});
答案 1 :(得分：121)
$(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");
}
}
答案 2 :(得分：75)
这个问题是2年之久，但它仍然是一个很好的问题，这是Google的第一个结果......但所有现有答案都建议设置并删除 HTML 属性（removeAttr（＆＃34;禁用＆＃34;））＆＃34;禁用＆＃34;，这不是正确的方法。关于属性与属性存在很多混淆。
＆＃34;禁用＆＃34;在标记is called a boolean attribute by the W3C中<input type="button" disabled>。
引用：
属性在DOM中;一个属性在HTML中被解析为DOM。
https://stackoverflow.com/a/7572855/664132
相关：
尽管如此，要记住关于checked属性的最重要的概念是它与checked属性不对应。 属性实际上对应于defaultChecked属性，而仅应用于设置复选框的初始值。 checked属性值不会随复选框的状态而改变，而checked属性则会改变。因此，确定是否选中复选框的跨浏览器兼容方式是使用属性...
相关：
属性通常会影响DOM元素的动态状态，而不会更改序列化的HTML属性。示例包括输入元素的value属性，输入和按钮的禁用属性，或复选框的checked属性。 .prop（）方法应该用于设置disabled和checked而不是.attr（）方法。
$( "input" ).prop( "disabled", false );
要[...]更改DOM属性，例如[...]表单元素的禁用状态，请使用.prop()方法。
关于问题的禁用更改部分：有一个名为＆＃34;输入＆＃34;的事件，但是browser support is limited并且它不是jQuery事件，所以jQuery赢了＆＃39 ;使它工作。 change事件可靠地工作，但在元素失去焦点时触发。所以可以将两者结合起来（有些人也会听取密钥和粘贴）。
这是一段未经测试的代码，用于说明我的意思：
$(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);
});
});
答案 3 :(得分：36)
或者对于我们不喜欢为每件小事使用jQ：
document.getElementById("submitButtonId").disabled = true;
答案 4 :(得分：35)
要删除已停用的属性，
$("#elementID").removeAttr('disabled');
并添加禁用属性使用
$("#elementID").prop("disabled", true);
享受：）
答案 5 :(得分：25)
$('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');
}
})
答案 6 :(得分：12)
以下是文件输入字段的解决方案。
要在未选择文件时禁用文件字段的提交按钮，请在用户选择要上载的文件后启用：
$(document).ready(function(){
$("#submitButtonId").attr("disabled", "disabled");
$("#fileFieldId").change(function(){
$("#submitButtonId").removeAttr("disabled");
});
});
HTML：
<%= form_tag your_method_path, :multipart => true do %><%= file_field_tag :file, :accept => "text/csv", :id => "fileFieldId" %><%= submit_tag "Upload", :id => "submitButtonId" %><% end %>
答案 7 :(得分：11)
你也可以使用这样的东西：
$(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);
}
});
});
这里是Live example
答案 8 :(得分：11)
它会像这样工作：
$('input[type="email"]').keyup(function() {
if ($(this).val() != '') {
$(':button[type="submit"]').prop('disabled', false);
} else {
$(':button[type="submit"]').prop('disabled', true);
}
});
确保“已禁用”＆＃39; HTML中的属性
答案 9 :(得分：8)
如果按钮本身是一个jQuery样式按钮（带.button（）），则需要刷新按钮的状态，以便在删除/添加禁用属性后添加/删除正确的类。
$( ".selector" ).button( "refresh" );
答案 10 :(得分：8)
表格登录：
<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>
<强>使用Javascript：
$(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);
}
});
});
答案 11 :(得分：7)
上面的答案还没有解决基于菜单的剪切/粘贴事件的问题。下面是我用来执行这两项操作的代码。请注意，操作实际上会在超时时发生，因为切换和过去事件实际上会在更改发生之前触发，因此超时会给出一点时间。
$( ".your-input-item" ).bind('keyup cut paste',function() {
var ctl = $(this);
setTimeout(function() {
$('.your-submit-button').prop( 'disabled', $(ctl).val() == '');
}, 100);
});
答案 12 :(得分：5)
我们可以简单地拥有if＆amp;否则。如果您的输入为空，我们可以
if($(#name).val() != '') {
$('input[type="submit"]').attr('disabled' , false);
}
否则我们可以将false改为true
答案 13 :(得分：3)
Vanilla JS解决方案。它适用于整个表单，而不仅仅是一个输入。
正在选择JavaScript标签。
HTML表单：
var form = document.querySelector('form')
var inputs = form.querySelectorAll('input')
var required_inputs = form.querySelectorAll('input[required]')
var register = document.querySelector('input[type="submit"]')
form.addEventListener('keyup', function(e) {
var disabled = false
inputs.forEach(function(input, index) {
if (input.value === '' || !input.value.replace(/\s/g, '').length) {
disabled = true
}
})
if (disabled) {
register.setAttribute('disabled', 'disabled')
} else {
register.removeAttribute('disabled')
}
})<form action="/signup">
<div>
<label for="username">User Name</label>
<input type="text" name="username" required/>
</div>
<div>
<label for="password">Password</label>
<input type="password" name="password" />
</div>
<div>
<label for="r_password">Retype Password</label>
<input type="password" name="r_password" />
</div>
<div>
<label for="email">Email</label>
<input type="text" name="email" />
</div>
<input type="submit" value="Signup" disabled="disabled" />
</form>
一些解释：
在此代码中，我们在html表单上添加keyup事件，并在每次按键时检查所有输入字段。如果我们至少有一个输入字段为空或仅包含空格字符，则将true值分配给Disabled变量并禁用Submit按钮。
如果您需要禁用“提交”按钮，直到填写了所有必填的输入字段-替换：
inputs.forEach(function(input, index) {
具有：
required_inputs.forEach(function(input, index) {
其中required_inputs已经声明为仅包含必需输入字段的数组。
答案 14 :(得分：2)
我必须努力使其适合我的用例。
我有一个表单，其中所有字段在提交之前必须具有值。
这就是我的所作所为：
$(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);
});
});
感谢大家的回答。
答案 15 :(得分：2)
请参阅以下代码以启用或停用提交按钮
如果Name和City字段有值，则只启用Submit按钮。
<script>
$(document).ready(function() {
$(':input[type="submit"]').prop('disabled', true);
$('#Name').keyup(function() {
ToggleButton();
});
$('#City').keyup(function() {
ToggleButton();
});
});
function ToggleButton() {
if (($('#Name').val() != '') && ($('#City').val() != '')) {
$(':input[type="submit"]').prop('disabled', false);
return true;
} else {
$(':input[type="submit"]').prop('disabled', true);
return false;
}
} </script><form method="post">
<div class="row">
<div class="col-md-4">
<h2>Getting started</h2>
<fieldset>
<label class="control-label text-danger">Name</label>
<input type="text" id="Name" name="Name" class="form-control" />
<label class="control-label">Address</label>
<input type="text" id="Address" name="Address" class="form-control" />
<label class="control-label text-danger">City</label>
<input type="text" id="City" name="City" class="form-control" />
<label class="control-label">Pin</label>
<input type="text" id="Pin" name="Pin" class="form-control" />
<input type="submit" value="send" class="btn btn-success" />
</fieldset>
</div>
</div>
</form>
答案 16 :(得分：1)
提供Al类型的溶液。所以我想尝试不同的解决方案。如果您在输入字段中添加id属性，则更简单。
<input type="text" name="textField" id="textField"/>
<input type="submit" value="send" id="submitYesNo"/>
现在这是您的jQuery
$("#textField").change(function(){
if($("#textField").val()=="")
$("#submitYesNo").prop('disabled', true)
else
$("#submitYesNo").prop('disabled', false)
});
答案 17 :(得分：1)
从我的项目中查看此片段
$("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
所以只需在执行操作后禁用按钮
$(this).attr('disabled', 'disabled');
答案 18 :(得分：1)
禁用：$('input[type="submit"]').prop('disabled', true);
启用：$('input[type="submit"]').removeAttr('disabled');
上述启用代码比以下代码更准确：
$('input[type="submit"]').removeAttr('disabled');
您可以同时使用两种方法。
答案 19 :(得分：0)
尝试
The fox jumps over the bush, the penguin walks, the cat drinks.let check = inp=> inp.nextElementSibling.disabled = !inp.value;
答案 20 :(得分：-1)
我希望以下代码可以帮助某人.. !!! ：）
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*/