jQuery禁用/启用提交按钮


810

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

…但这不起作用。有任何想法吗?


2
不要像这样使用removeAttr('disabled')。使用prop()切换状态。请参阅我的答案官方文档
basic6

Answers:


1193

问题在于,仅当焦点移离输入时(例如,有人单击了输入或将选项卡移出了输入),才触发更改事件。尝试改用keyup:

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

2
好的,但是问题是当我删除最后一个字母时,我不得不再按一次以捕获空值并禁用我的按钮,原因是当我按退格键删除最后一个字母时,我的字段仍在填充,所以我的按键被捕获,然后删除字母。所以...我应该怎么做呢?
09年

1
抱歉,我不首先测试代码。如果用keyup替换keypress会有所帮助吗?
Eric Palakovich Carr

4
如果不使用键盘即可更改字段的值怎么办?
内森

1
这可行,但是似乎省略了CSS。例如,调用$(“#loginButton”)。button(); on input id="loginButton" type="submit" name="Submit" value="Login" disabled>将显示带有CSS禁用类的禁用按钮。
Gaʀʀʏ

39
应该在attr('disabled,'disabled')方法上使用prop('disabled',true)方法,请参阅prop()上的文档
马丁

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

4
是的,它有效!但是..一个问题...你能解释一下吗:$(“:text”)。keypress(check_submit).each(function(){check_submit();}); 谢谢
kmunky

1
这个问题是,当按下Backspace或Delete键时,jQuery的keypress事件不会始终触发。这意味着用户可以退出文本,并且不会调用该函数,这是UX失败的原因。我认为keyup是大多数人使用的手段。我不太喜欢 我希望在键盘按下时产生反馈,但是很难实现。
BobRodes

79

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

的HTML

W3C<input type="button" disabled>将标记中的“ disabled” 称为boolean属性

HTML与DOM

引用:

属性在DOM中;HTML中的一个属性被解析为DOM。

https://stackoverflow.com/a/7572855/664132

jQuery查询

有关:

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

相关:

属性通常会在不更改序列化HTML属性的情况下影响DOM元素的动态状态。示例包括输入元素的value属性,输入和按钮的Disabled属性或复选框的checked属性。应该使用.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);
    });
});

1
感谢您提供该信息,但实际上并没有说使用该属性是否会引起问题,例如,跨浏览器兼容性的丧失。使用该属性是否实际上会引起问题?
ChrisJJ

赞成,但我也想知道更改属性会导致问题的特定情况,如@ChrisJJ所述。
Armfoot


35

或者对于不喜欢在每件事上使用jQ的我们:

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

55
您很喜欢Javascript素食主义者,这很不错,但这实际上并不能解决所有问题。
米歇尔

6
得到25个投票的答案解释了世界上许多糟糕的代码:/
o0'。

26

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

14

它将像这样工作:

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

确保您的HTML中有一个“禁用”属性


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

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

这是现场的例子


这是对我有用的那个。我测试了上述内容,但它们存在一些问题。谢谢Sonu!
Geeocode

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

8

如果按钮本身是jQuery样式的按钮(带有.button()),则需要刷新按钮的状态,以便一旦删除/添加了disable属性,就可以添加/删除正确的类。

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

3
@The_Black_Smurf我添加了它,以防将来对某人有帮助-这有什么害处?
汤姆·张伯伦

哇。伤心地听到jQuery的自动刷新并不在这里工作。谢谢!
ChrisJJ

7

上面的答案不能解决基于菜单的剪切/粘贴事件。下面是我同时使用这两个代码。请注意,操作实际上是随着超时发生的,因为剪切和过去的事件实际上是在更改发生之前触发的,因此超时为发生这种情况提供了一点时间。

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

6

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


6

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

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

否则我们可以将假变成真


4

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

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

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

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

您可以同时使用两种方法。


用于仅使用.prop('disabled',false);
rahim.nagori

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

感谢大家在这里的回答。


2

请查看以下代码以启用或禁用“提交”按钮

如果“名称”和“城市”字段具有值,则仅启用“提交”按钮。

<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>


只是为了挑剔,您是否不应该等到(至少)第二个字符才能启用按钮?;-)
克里斯·平克

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


1

提供了所有类型的解决方案。因此,我想尝试其他解决方案。简单地说,如果您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)
});

-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*/
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.