10

想知道是否有人可以用下面的 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 并且有一段时间没有使用它.. 所以任何指针表示赞赏

谢谢

4

7 回答 7

33

您的事件绑定仅在文档准备就绪。

因此，当您更改某些内容时，没有听众。

改为这样做：

$(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);
    }
}
于 2013-05-26T17:18:17.133 回答
5

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

$('#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 说明此方法

于 2013-05-26T17:17:46.897 回答
1

更改按钮的属性而不是属性...使用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 代码） ......这是小提琴

于 2013-05-26T17:14:10.253 回答
0

您必须再次运行 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();
  });
});
于 2013-05-26T17:18:19.990 回答
0

我一直在尝试按照这个线程来使用自定义条纹表单来实现它。

这是我的代码：

$(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在我添加条件之前，一切正常。该按钮只是保持禁用状态！

于 2019-04-26T18:54:58.303 回答
0

此代码将检查文本框、电子邮件和复选框输入类型，在我的最后工作正常，如果输入字段被隐藏，将只检查可见字段。

  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;
  });
于 2019-10-15T14:40:37.683 回答
-1

使用提交时的表格。干净整洁。您不必担心更改和按键事件触发。不必担心键位和焦点问题。

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;
}
于 2013-11-24T21:18:26.837 回答