我有这个HTML:
<input type="text" name="textField" />
<input type="submit" value="send" />
我怎么做这样的事情:
当文本字段为空时，提交应该被禁用(disabled="disabled")。 当在文本字段中键入内容以删除禁用属性时。 如果文本字段再次变为空(文本被删除)，提交按钮应该再次禁用。
我是这样做的:
$(document).ready(function(){
$('input[type="submit"]').attr('disabled','disabled');
$('input[type="text"]').change(function(){
if($(this).val != ''){
$('input[type="submit"]').removeAttr('disabled');
}
});
});
但是不管用。什么好主意吗?
当前回答
$(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");
}
}
其他回答
我希望下面的代码能帮助到一些人!!：）
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*/
这里是文件输入字段的解决方案。
当文件未被选中时禁用文件字段的提交按钮，然后在用户选择要上传的文件后启用:
$(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 %>
$(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"]').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);
}
});
});
这是一个活生生的例子
香草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值赋给禁用变量并禁用提交按钮。
如果你需要禁用提交按钮，直到所有必需的输入字段都被填满-替换:
inputs.forEach(function(input, index) {
:
required_inputs.forEach(function(input, index) {
其中required_inputs已经声明为只包含必需输入字段的数组。
