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

And here's your jsFiddle illustrating this method

Answer 3

更改按钮的属性而非属性...使用prop()代替attr()

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

并且我认为这没有任何意义，因为你没有任何事件绑定..这只会检查输入是否在document.ready中有值..但是事件绑定与否取决于你。但是由于这些特殊原因prop()是在jquery的后续版本中引入的......

<强>更新

看到下面的评论后，

$(function(){
  validate();
  $('input[type="text"]').keyup(validate); //you can use your multiple id selector instead of the attribute selector that i am using
});

function validate() {
  var inputvalue = $('input[type="text"]').filter(function (n) {
     return this.value.length > 0;
  })

  if (inputvalue.length == $('input[type="text"]').length) {
     $("input[type=submit]").prop("disabled", false);
  } else {
     $("input[type=submit]").prop("disabled", true);
  }
}

这适用于任意数量的输入，类型为文本（根本不需要更改javascript / jquery代码） ...这里是fiddle

Answer 4

你必须再次运行if命令才能启用change输入事件

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

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

Answer 5

我一直在尝试遵循此线程以使用自定义的 stripe 表单来实现此目的。

这是我的代码：

$(document).ready(function (){
  validate();
  $('#EMAIL, #FNAME, #LNAME, #card-element').change(validate);
});

function validate(){
    if ($('#EMAIL').val().length   >   0   &&
        $('#FNAME').val().length  >   0   &&
        $('#LNAME').val().length    >   0  &&
        $('#card-element').hasClass('StripeElement--complete')
        ){
        $("button[type=button]").prop("disabled", false);
    }
    else {
        $("button[type=button]").prop("disabled", true);
    }
}

一切正常，直到我添加了.hasClass条件。该按钮只是保持禁用状态！

Answer 6

此代码将检查文本框，电子邮件和复选框的输入类型，在我的末端效果很好，并且如果隐藏了输入字段，则将仅检查可见字段。

  var register_disable = false;
  jQuery("#SUBMIT_BUTTON-ID").prop('disabled', register_disable);
  jQuery("input[type!='submit']").bind('keyup change', function () {
    jQuery("input[type='text'], input[type='email']").not(':input:hidden').each(function () {
      if (jQuery(this).val().trim() == "" || !$("input[type='checkbox']").is(':checked')) {
        register_disable = true;
      }
    });
    jQuery("#SUBMIT_BUTTON-ID").prop('disabled', register_disable);
    register_disable = false;
  });

Answer 7

使用表单onsubmit。干净整洁。您不必担心更改和按键事件触发。不必担心密钥和焦点问题。

http://www.w3schools.com/jsref/event_form_onsubmit.asp

<form action="formpost.php" method="POST" onsubmit="return validateCreditCardForm()">
   ...
</form>

function validateCreditCardForm(){
    var result = false;
    if (($('#billing-cc-exp').val().length > 0) &&
        ($('#billing-cvv').val().length  > 0) &&
        ($('#billing-cc-number').val().length > 0)) {
            result = true;
    }
    return result;
}

禁用“提交”按钮，直到填写输入字段

7 个答案: