jQuery禁用/启用提交按钮

Question

我有这个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');
        }
    });
});

......但它不起作用.有任何想法吗？谢谢.

Answer 1

问题是只有当焦点从输入移开时才会触发更改事件(例如,有人点击输入或标签输出).尝试使用keyup:

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

Answer 2

$(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");
  }
}

Answer 3

这个问题已经有2年了,但它仍然是一个很好的问题,这是Google的第一个结果...但是所有现有的答案都建议设置和删除 HTML 属性(removeAttr("disabled"))"disabled",这不是正确的方法.关于属性与属性存在很多混淆.

HTML

<input type="button" disabled>标记中的"禁用" 被W3C 称为布尔属性.

HTML与DOM

引用:

属性在DOM中; HTML中的属性被解析为DOM.

/sf/answers/530099881/

JQuery的

有关:

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

相关:

属性通常会影响DOM元素的动态状态,而不会更改序列化的HTML属性.示例包括输入元素的value属性,输入和按钮的disabled属性或复选框的checked属性.应该使用.prop()方法来设置disabled和checked而不是.attr()方法.

$( "input" ).prop( "disabled", false );

摘要

要[...]更改DOM属性,例如表单元素的禁用状态,请使用.prop()方法.

(http://api.jquery.com/attr/)

关于更改部分问题的禁用:有一个名为"input"的事件,但浏览器支持有限,并且它不是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);
    });
});

Answer 4

要删除已禁用的属性,

 $("#elementID").removeAttr('disabled');

并添加禁用的属性使用,

$("#elementID").prop("disabled", true);

请享用 :)

Answer 5

或者对于我们不喜欢为每件小事使用jQ:

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

Answer 6

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');
    }
})

Answer 7

这是文件输入字段的解决方案.

要在未选择文件时禁用文件字段的提交按钮,请在用户选择要上载的文件后启用:

$(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 %>

Answer 8

它会像这样工作:

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

确保HTML中存在"已禁用"属性

Answer 9

你也可以使用这样的东西:

$(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的例子

Answer 10

对于表单登录:

<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);
        }
    });
});

Answer 11

禁用：$('input[type="submit"]').prop('disabled', true);

使能够：$('input[type="submit"]').removeAttr('disabled');

上面的启用代码比以下更准确：

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

您可以使用这两种方法。

Answer 12

如果按钮本身是一个jQuery样式的按钮(带.button()),则需要刷新按钮的状态,以便在删除/添加disabled属性后添加/删除正确的类.

$( ".selector" ).button( "refresh" );

Answer 13

上面的答案也没有涉及检查基于菜单的剪切/粘贴事件.下面是我用来做两者的代码.请注意,操作实际上会在超时时发生,因为切换和过去事件实际上会在更改发生之前触发,因此超时会给出一点时间.

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

Answer 14

我们可以简单地使用if＆else。如果您的输入为空，我们可以拥有

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

否则我们可以将假变成真

Answer 15

香草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已经声明为仅包含必需输入字段的数组。