javascript - jquery禁用按钮




jQuery禁用/启用提交按钮 (12)

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

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

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


对于表单登录:

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

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

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

这里是现场示例


它会像这样工作:

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

确保HTML中存在“禁用”属性


我不得不努力工作以适应我的使用情况。

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

以下是我所做的:

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

感谢大家在这里的答案。


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

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

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

要删除禁用的属性使用,

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

并添加禁用的属性使用,

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

请享用 :)


这个问题是2岁,但它仍然是一个很好的问题,这是第一个谷歌的结果...但所有现有的答案建议设置和删除 HTML 属性 (removeAttr(“disabled”))“disabled”,这不是正确的做法。 关于属性与财产有很多混淆。

HTML

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

HTML与DOM

引用:

属性在DOM中; 一个属性位于解析到DOM中的HTML中。

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

JQuery的

有关:

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

相关:

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

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

概要

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

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

至于关于改变问题的禁用部分:有一个名为“输入”的事件,但浏览器支持是有限的 ,它不是一个jQuery事件,所以jQuery不会使它工作。 更改事件可靠地工作,但当元素失去焦点时会被触发。 所以人们可能会将这两者结合起来(有些人也会倾听密码和粘贴)。

这里有一段未经测试的代码来展示我的意思:

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

问题在于,只有当焦点从输入移开(例如,有人点击输入或标签页时),更改事件才会触发。 尝试使用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");
  }
}




forms