我正在尝试将我的JavaScript代码“瞄准”特定的代码片段,而我几乎就在那里但是在最后一道障碍中堕落了!
我创造了一个我想在这里创造的小提琴;
http://jsfiddle.net/k4mLb14n/1/
<div class="pricing-levels-3">
<p><strong>Which level would you like? (Select 3 Levels)</strong></p>
<input class="single-checkbox"type="checkbox" name="vehicle" value="Bike">Level 1<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 2<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 3<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 4<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 5<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 6<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 7<br>
</div>
<div class="pricing-levels-3">
<p><strong>Which level would you like? (Select 3 Levels)</strong></p>
<label><input class="single-checkbox"type="checkbox" name="vehicle" value="Bike">Level 1</label><br>
<label><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 2</label><br>
<label><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 3</label><br>
<label><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 4</label><br>
<label><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 5</label><br>
<label><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 6</label><br>
<label><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 7</label><br>
</div>
所以基本上我想要创建一个清单并限制你可以选择的项目数量,在我的小提琴中我已经准确地得到了第一个列表 - 你只能选择3个项目,但在第二个列表中你可以选择任意多个。
唯一的区别是第二个列表是<label>
标签中的复选框,这就是我想要构建代码的方式,但这会破坏我的javascript。
所以我想在这里调整我的javascript,以便它适用于第二个列表;
var limit = 3;
$('input.single-checkbox').on('change', function(evt) {
if($(this).siblings(':checked').length >= limit) {
this.checked = false;
}
});
欢迎任何建议!
答案 0 :(得分:2)