Javascript 当字段等于特定数字时，JQuery禁用按钮

我正在开发一个表单，可以在点击按钮时添加特定数量的字段，当数量达到添加文本字段的限制时，它将被禁用

问题是，当文本字段达到允许的最大输入框时，当它达到限制时，仍然可以单击该按钮，并且当您两次单击该按钮时，该按钮将被禁用

这是我的密码

$（文档）.ready（函数（）{
var max_fields=5；//允许的最大输入框数
var wrapper=$（“#healthcard”）；//字段包装器
var add_button=$（“#add_字段”）；//添加按钮ID
var x=0；//初始文本框计数
$（添加按钮）。单击（函数（e）{//在添加输入按钮上单击
e、 预防默认值（）；
如果（x>=max_字段）{//max输入框允许
e、 预防默认值（）；
$（此）.toggleClass（“禁用”）；
}否则{
x++；//文本框增量
$（包装器）。追加（'

当
禁用
时使用
addClass
，当
启用时使用
removeClass
而不是
toggleClass
，如下所示：

$(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (x >= max_fields) { //max input box allowed
      e.preventDefault();
      $(this).addClass("disabled");//addClass
    } else {
      x++; //text box increment
      $(wrapper).append('<div class="hmo-add' + x + '""><div class="col-sm-12 col-md-4"><div class="form-group"><label class="card">Healthcard</label><input class="form-control col-md-4" type="text" name="mytext[]"/></div></div><div class="col-sm-12 col-md-8"><div class="form-group"><label class="card">Healthcard No.</label><input class="form-control col-md-8" type="text" /><a href="#" class="remove_field">Remove</a></div></div></div>'); //add input box
    }
});

$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $('.hmo-add' + x).remove();
    x--;
    e.preventDefault();
    $('#add_field').removeClass("disabled"); //removeClass
})

$（添加按钮）。单击（函数（e）{//在添加输入按钮上单击
e、 预防默认值（）；
如果（x>=max_字段）{//max输入框允许
e、 预防默认值（）；
$（this）.addClass（“已禁用”）；//addClass
}否则{
x++；//文本框增量
$（包装器）.append（“在
append
之后检查
x
：

$(add_button).click(function(e) { //on add input button click
  if (x < max_fields) { //max input box allowed
    x++; //text box increment
    $(wrapper).append('<div class="hmo-add' + x + '""><div class="col-sm-12 col-md-4"><div class="form-group"><label class="card">Healthcard</label><input class="form-control col-md-4" type="text" name="mytext[]"/></div></div><div class="col-sm-12 col-md-8"><div class="form-group"><label class="card">Healthcard No.</label><input class="form-control col-md-8" type="text" /><a href="#" class="remove_field">Remove</a></div></div></div>'); //add input box
    if (x == max_fields)
    {
      $(this).addClass("disabled");
    }
  }
});

$（添加按钮）。单击（函数（e）{//在添加输入按钮上单击
如果（x$（wrapper）.append（“您的问题是需要单击按钮6次才能禁用它，这是错误的，下面是使用disabled属性的工作代码段：


当用户达到最大值时，我禁用该按钮

按钮点击是注册使用未禁用的按钮，使用
not（':disabled'）

当用户删除div时，该按钮将再次启用



$（文档）.ready（函数（）{
var max_fields=5；//允许的最大输入框数
var wrapper=$（“#healthcard”）；//字段包装器
var add_button=$（“#add_字段”）；//添加按钮ID
var x=0；//初始文本框计数
$（“#添加_字段”）。不（':disabled'）。单击（函数（e）{//在添加输入按钮上单击
e、 预防默认值（）；
x++；//文本框增量
if（x==max_字段）
{
$（this.attr（“disabled”，true）；
}
$（包装器）.append（“这是您需要的：

$(document).ready(function() {
    var max_fields = 5; //maximum input boxes allowed
    var wrapper = $("#healthcard"); //Fields wrapper
    var add_button = $("#add_field"); //Add button ID

    var x = 0; //initlal text box count
    $(add_button).click(function(e) { //on add input button click
        e.preventDefault();
        if (x >= max_fields) { //max input box allowed
            $(this).addClass("disabled");
            $(this).attr("disabled", "disabled");
        } else {
            x++; //text box increment
            $(wrapper).append('<div class="hmo-add' + x + '""><div  class="col-sm-12 col-md-4"><div class="form-group"><label class="card">Healthcard</label><input class="form-control col-md-4" type="text" name="mytext[]"/></div></div><div class="col-sm-12 col-md-8"><div class="form-group"><label class="card">Healthcard No.</label><input class="form-control col-md-8" type="text" /><a href="#" class="remove_field">Remove</a></div></div></div>'); //add input box
        }
    });

    $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
        e.preventDefault();
        $('.hmo-add' + x).remove();
        x--;
        $('#add_field').removeClass("disabled");
        $('#add_field').removeAttr("disabled");
    })
});

$（文档）.ready（函数（）{
var max_fields=5；//允许的最大输入框数
var wrapper=$（“#healthcard”）；//字段包装器
var add_button=$（“#add_字段”）；//添加按钮ID
var x=0；//初始文本框计数
$（添加按钮）。单击（函数（e）{//在添加输入按钮上单击
e、 预防默认值（）；
如果（x>=max_字段）{//max输入框允许
$（此）.addClass（“已禁用”）；
$（此）.attr（“已禁用”、“已禁用”）；
}否则{
x++；//文本框增量
$（包装器）.append（'
$（文档）.ready（函数（）{
var max_fields=5；//允许的最大输入框数
var wrapper=$（“#healthcard”）；//字段包装器
var add_button=$（“#add_字段”）；//添加按钮ID
var x=0；//初始文本框计数
$（添加按钮）。单击（函数（e）{//在添加输入按钮上单击
e、 预防默认值（）；
//如果（x>=max_字段）{//max输入框允许
//e、 预防默认值（）；
//$（此）.toggleClass（“禁用”）；
//}否则{
如果（x$（包装器）.append）这是正确的答案you@GuruprasadRao谢谢你的演示！谢谢你的朋友！这节省了我的时间。谢谢你的进一步解释！+1这个代码结构非常流畅！谢谢你分享bro。这个答案没有用，除非你在这里包含一些代码。你应该始终在a中包含你对代码所做的更改nswer..该链接有一天可能会断开..当然@guruprasad，下次我只会这样做。我是堆栈溢出的新活跃人员。谢谢你的建议。没有问题@saikumar..你仍然可以编辑答案并添加它..：）谢谢你的回答，伙计！刚才没注意到。没问题@GeorgeTerenceTing。但我建议不要经常更改答案。记住，你只能选择一个答案，我觉得Inpego的答案应该是正确的。无论如何。快乐编码：）