禁用"提交"按钮,直到填写输入字段

Question

想知道是否有人能指出我正确的方向与下面的jquery.我想禁用提交按钮,直到填写输入字段.

我想出了这个

$(document).ready(function (){
 if ($('#inputName, #inputEmail, #inputTel').val().length > 0) {
  $("input[type=submit]").attr("disabled", "false");
 }
 else {
  $("input[type=submit]").attr("disabled", "true");
 }
});

但即使填写了所有文本输入字段,该按钮也会永久禁用

仍在学习Jquery并且暂时没有使用过它.所以任何指针都会受到赞赏

谢谢

Answer 1

您的事件绑定仅适用于文档准备.

所以当你改变某些东西时就没有听众.

改为:

$(document).ready(function (){
    validate();
    $('#inputName, #inputEmail, #inputTel').change(validate);
});

function validate(){
    if ($('#inputName').val().length   >   0   &&
        $('#inputEmail').val().length  >   0   &&
        $('#inputTel').val().length    >   0) {
        $("input[type=submit]").prop("disabled", false);
    }
    else {
        $("input[type=submit]").prop("disabled", true);
    }
}

Answer 2

您当前的代码很好,但不响应用户事件,这是您绊倒的地方.

$('#inputName, #inputEmail, #inputTel').keyup(function(){
    if($(this).val().length > 0){
        $("input[type=submit]").prop("disabled", false);
    }else{
        $("input[type=submit]").prop("disabled", true);
    }
});

实际编辑,这将无法正常工作.因为其中一个元素会因为提交按钮而被启用,而不管其他元素.我会暂时修补.

编辑这里是粗略的草稿修复,它可能更漂亮,但绝对是一个很好的起点.

var toValidate = $('#inputName, #inputEmail, #inputTel'),
    valid = false;
toValidate.keyup(function () {
    if ($(this).val().length > 0) {
        $(this).data('valid', true);
    } else {
        $(this).data('valid', false);
    }
    toValidate.each(function () {
        if ($(this).data('valid') == true) {
            valid = true;
        } else {
            valid = false;
        }
    });
    if (valid === true) {
        $('input[type=submit]').prop('disabled', false);
    }else{
        $('input[type=submit]').prop('disabled', true);        
    }
});

这是你的jsFiddle说明这种方法