jQuery禁用/启用提交按钮

Question

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

……但它不起作用。有什么想法吗？

Answer 1

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

问题在于，仅当焦点从输入移开时才会触发更改事件（例如，有人单击输入或标签退出）。尝试改用 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 3

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 4

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

在未选择文件时禁用文件字段的提交按钮，然后在用户选择要上传的文件后启用：

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

或者对于我们不喜欢在每件小事上都使用 jQ 的人：

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

Answer 6

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

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

Answer 7

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

HTML

标记is called a boolean attribute by the W3C 中<input type="button" disabled> 中的“已禁用”。

HTML 与 DOM

引用：

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

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

jQuery

​​>

相关：

尽管如此，关于checked 属性最重要的概念是它不对应于checked 属性。 属性实际上对应于 defaultChecked 属性，应该只用于设置复选框的初始值。选中的属性值不会随着复选框的状态而改变，而选中的属性会。因此，确定是否选中复选框的跨浏览器兼容方法是使用属性...

相关：

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

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

总结

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

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

---

至于问题的禁用更改部分：有一个名为“输入”的事件，但browser support is limited 不是 jQuery 事件，所以 jQuery 不会让它工作。更改事件可靠地工作，但在元素失去焦点时触发。所以可以将两者结合起来（有些人还听 keyup 和 paste）。

这是一段未经测试的代码来说明我的意思：

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

上面的答案也没有解决基于菜单的剪切/粘贴事件的检查。下面是我用来做这两件事的代码。请注意，该操作实际上是在超时的情况下发生的，因为剪切和过去的事件实际上是在更改发生之前触发的，所以超时给了一点时间来实现。

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

Answer 9

要删除禁用的属性使用，

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

并添加禁用属性使用，

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

享受:)

Answer 10

如果按钮本身是 jQuery 样式按钮（使用 .button()），则需要刷新按钮的状态，以便在删除/添加 disabled 属性后添加/删除正确的类。

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

Answer 11

我必须做一些工作才能使它适合我的用例。

我有一个表单，在提交之前所有字段都必须有一个值。

这就是我所做的：

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

在这里感谢大家的回答。

Answer 12

看看我项目中的这个 sn-p

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

Answer 13

请参阅下面的代码来启用或禁用提交按钮

如果名称和城市字段具有值，则只会启用提交按钮。

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

Answer 14

提供所有类型的解决方案。所以我想尝试不同的解决方案。简单地说，如果您在输入字段中添加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)
});

Answer 15

表单登录：

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

我们可以简单地拥有 if & else 。如果假设您的输入为空，我们可以拥有

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

否则我们可以将 false 变为 true

Answer 17

它将像这样工作：

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

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

Answer 18

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 变量并禁用提交按钮。

如果您需要禁用提交按钮，直到填写所有必填字段 - 替换：

inputs.forEach(function(input, index) {

与：

required_inputs.forEach(function(input, index) {

其中 required_inputs 已声明为仅包含必需输入字段的数组。

Answer 19

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

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

上面的启用代码比：

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

这两种方法都可以使用。

Answer 20

我希望下面的代码对某人有所帮助..!!! :)

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

Answer 21

试试

let check = inp=> inp.nextElementSibling.disabled = !inp.value;

<input type="text" name="textField" oninput="check(this)"/>
<input type="submit" value="send" disabled />