限制按钮内的点击次数 - jquery

我使用Jquery克隆了一些表单输入onclick。我想要实现的是，添加按钮内的计数器触发这两个按钮之一上的事件。如果计数为0（零），我想禁用添加按钮并为其分配一个类（不活动）。如果计数是9，我想禁用del键并为它分配一个类（not-acitve）。限制按钮内的点击次数 - jquery

我的代码如下所示：

<button id="add" class="active" type="button">Downcount&nbsp;&#040;<span id="counter">9</span>&#041;</button> 
<button id="del" class="active" type="button">Upcount</button>

jQuery的是这样的：

$(document).ready(function() { 

    var upcount = 0; 
    var downcount = 0; 
    var start = 9; 

    $("#add").click(function() { 
    upcount++; 
    $("#counter").html(start - upcount + downcount); 
    }); 

    $("#del").click(function() { 
    downcount++; 
    $("#counter").html(start - upcount + downcount); 
    }); 

});

我也提出了这一个小提琴：https://jsfiddle.net/phii/8zf31158/

有人可以帮助我与if语句甚至更优雅的方式来实现我的目标？

提前致谢！

来源

2016-12-12 арно нюм

您可能希望相反。当计数器为零时禁用“向下”按钮，当它为9时禁用“向上”按钮。这样就不会越过0-9范围。无论如何，你可以简单地使用'$（this）.prop（'disabled'，1）;'来禁用按钮。 – haim770

当然！我想留在0到9的范围内;）你能给我一个代码示例给你的推荐吗？我真的是一个血腥的noob :( –

更改您的方法并只使用一个counter。

之后，您可以创建一个函数，检查您的button的值为counter和disable。

$(document).ready(function() { 
 
    var counter = 9; 
 
    
 
    $("#add").click(function() { 
 
    counter++; 
 
    $("#counter").html(counter); 
 
    checkcounter(); 
 
    }); 
 

 
    $("#del").click(function() { 
 
    counter--; 
 
    $("#counter").html(counter); 
 
    checkcounter(); 
 
    }); 
 
    
 
    function checkcounter() 
 
    { 
 
    if(counter >= 10) 
 
     $("#add").prop("disabled",true); 
 
    else if(counter<=0) 
 
    { 
 
     $("#del").prop("disabled",true); 
 
    } 
 
    else 
 
    { 
 
     $("#add").prop("disabled",false); 
 
     $("#del").prop("disabled",false); 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="add" class="active" type="button">Downcount&nbsp;&#040;<span id="counter">9</span>&#041;</button> 
 
<button id="del" class="active" type="button">Upcount</button>

来源

2016-12-12 13:30:25 Alexis

这对我的需求甚至更好 - 非常感谢！@Turnip解决了它，就像它满足了我在添加类时的需求。但是这真的是成功，因为它真的禁用了按钮我需要的是，因为按钮也必须停止克隆输入。非常感谢！最佳答案。我真的很感谢你的帮助！ –

再次感谢！我将它实现到我的表单中，它的工作方式就像一个魅力。 –

@арнонюм没问题;） – Alexis

我认为你可以像this做的更优雅的方式来实现自己的目标。

var upcount = 9; 
 
function updateCount() { 
 
    $("#counter").html(upcount); 
 
} 
 
$(document).ready(function() { 
 
    $("#add").click(function() { 
 
     (upcount < 9) && upcount++; 
 
     updateCount(); 
 
    }); 
 
    $("#del").click(function() { 
 
     (upcount > 0) && upcount--; 
 
     updateCount(); 
 
    }); 
 
});

<button id="del" class="active" type="button">Downcount&nbsp;&#040;<span id="counter">9</span>&#041;</button> 
 
<button id="add" class="active" type="button">Upcount</button> 
 
<script 
 
    src="https://code.jquery.com/jquery-1.12.4.min.js" 
 
    integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" 
 
    crossorigin="anonymous"></script>

来源

2016-12-12 13:32:28

限制按钮内的点击次数 - jquery

回答

相关问题