[英]jQuery disable/enable submit button
我有这个 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');
}
});
});
......但它不起作用。 有任何想法吗?
问题是只有当焦点从输入移开时更改事件才会触发(例如,有人点击输入或选项卡)。 尝试使用 keyup 代替:
$(document).ready(function() {
$(':input[type="submit"]').prop('disabled', true);
$('input[type="text"]').keyup(function() {
if($(this).val() != '') {
$(':input[type="submit"]').prop('disabled', false);
}
});
});
$(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 年了,但它仍然是一个好问题,它是第一个谷歌结果......但所有现有答案都建议设置和删除HTML属性(removeAttr("disabled")) "disabled",这不是正确的方法。 关于属性与属性有很多混淆。
标记中<input type="button" disabled>
中的<input type="button" disabled>
被 W3C 称为布尔属性。
引用:
属性在 DOM 中; 一个属性位于被解析为 DOM 的 HTML 中。
https://stackoverflow.com/a/7572855/664132
有关的:
然而,关于checked 属性要记住的最重要的概念是它不对应于checked 属性。 该属性实际上对应于 defaultChecked 属性,应该仅用于设置复选框的初始值。 选中的属性值不会随着复选框的状态而改变,而选中的属性会。 因此,确定是否选中复选框的跨浏览器兼容方法是使用属性...
相关的:
属性通常会影响 DOM 元素的动态状态,而不会更改序列化的 HTML 属性。 示例包括输入元素的 value 属性、输入和按钮的禁用属性或复选框的选中属性。 .prop() 方法应该用于设置禁用和检查,而不是 .attr() 方法。
$( "input" ).prop( "disabled", false );
要 [...] 更改 DOM 属性,例如表单元素的 [...] 禁用状态,请使用.prop()方法。
( http://api.jquery.com/attr/ )
至于问题的更改部分禁用:有一个名为“输入”的事件,但浏览器支持有限,而且它不是 jQuery 事件,因此 jQuery 不会使其工作。 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);
});
});
要删除禁用属性的使用,
$("#elementID").removeAttr('disabled');
并添加禁用属性使用,
$("#elementID").prop("disabled", true);
享受 :)
或者对于我们那些不喜欢在每件小事上都使用 jQ 的人:
document.getElementById("submitButtonId").disabled = true;
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');
}
})
它会像这样工作:
$('input[type="email"]').keyup(function() {
if ($(this).val() != '') {
$(':button[type="submit"]').prop('disabled', false);
} else {
$(':button[type="submit"]').prop('disabled', true);
}
});
确保您的 HTML 中有一个 'disabled' 属性
你也可以使用这样的东西:
$(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(){
$("#submitButtonId").attr("disabled", "disabled");
$("#fileFieldId").change(function(){
$("#submitButtonId").removeAttr("disabled");
});
});
网址:
<%= form_tag your_method_path, :multipart => true do %><%= file_field_tag :file, :accept => "text/csv", :id => "fileFieldId" %><%= submit_tag "Upload", :id => "submitButtonId" %><% end %>
对于表单登录:
<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);
}
});
});
上面的答案也没有解决检查基于菜单的剪切/粘贴事件。 下面是我用来做这两件事的代码。 请注意,该操作实际上是在超时后发生的,因为剪切和过去事件实际上在更改发生之前就已触发,因此超时为该发生提供了一点时间。
$( ".your-input-item" ).bind('keyup cut paste',function() {
var ctl = $(this);
setTimeout(function() {
$('.your-submit-button').prop( 'disabled', $(ctl).val() == '');
}, 100);
});
如果按钮本身是一个 jQuery 样式的按钮(使用 .button()),您将需要刷新按钮的状态,以便在删除/添加禁用属性后添加/删除正确的类。
$( ".selector" ).button( "refresh" );
我们可以简单地拥有 if & else .if 假设您的输入为空,我们可以拥有
if($(#name).val() != '') {
$('input[type="submit"]').attr('disabled' , false);
}
否则我们可以把假改成真
香草 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 事件,并在每次按键时检查所有输入字段。 如果我们至少有一个输入字段为空或仅包含空格字符,那么我们将真值分配给 disabled 变量并禁用提交按钮。
如果您需要在填写所有必填输入字段之前禁用提交按钮 - 替换:
inputs.forEach(function(input, index) {
和:
required_inputs.forEach(function(input, index) {
其中 required_inputs 已声明为仅包含必需输入字段的数组。
禁用: $('input[type="submit"]').prop('disabled', true);
启用: $('input[type="submit"]').removeAttr('disabled');
上面的启用代码比:
$('input[type="submit"]').removeAttr('disabled');
您可以使用这两种方法。
我必须做一些工作才能使它适合我的用例。
我有一个表单,其中所有字段在提交之前都必须有一个值。
这是我所做的:
$(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);
});
});
感谢大家在这里的回答。
请参阅以下代码以启用或禁用提交按钮
如果“名称”和“城市”字段具有值,则只会启用“提交”按钮。
<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>
看看我的项目中的这个片段
$("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');
提供所有类型的解决方案。 所以我想尝试不同的解决方案。 简单地说,如果您在输入字段中添加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)
});
尝试
let check = inp=> inp.nextElementSibling.disabled = !inp.value;
<input type="text" name="textField" oninput="check(this)"/> <input type="submit" value="send" 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*/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.