javascript - 如果选择了一些复选框,如何禁用其余可用的复选框
问题描述
我想通过互联网找到这种类型的带有图像的复选框。( https://codepen.io/kskhr/pen/pRwKjg ) I need to disable the rest of the checkboxes when 3 are selected.
JS
// image gallery
// init the state from the input
$(".image-checkbox").each(function () {
if ($(this).find('input[type="checkbox"]').first().attr("checked")) {
$(this).addClass('image-checkbox-checked');
}
else {
$(this).removeClass('image-checkbox-checked');
}
});
// sync the state to the input
$(".image-checkbox").on("click", function (e) {
$(this).toggleClass('image-checkbox-checked');
var $checkbox = $(this).find('input[type="checkbox"]');
$checkbox.prop("checked",!$checkbox.prop("checked"))
e.preventDefault();
});
我认为最好的方法可以用javascript解决,但我有点困惑。
谢谢!
解决方案
只是一些简单的逻辑来检查当前有多少类,以及当前单击的元素是否具有类,如果没有,则应禁用它:
if ($('.image-checkbox-checked').length === 3 && !$(this).hasClass('image-checkbox-checked'))
return;
如果你将它添加到 onclick 事件中,它应该会采取相应的行动。
这是一个分叉的代码笔: https ://codepen.io/anon/pen/Rvyqyq
Codepen 出于某种原因不喜欢这样,如果它没有加载,这里是一个片段:
// image gallery
// init the state from the input
$(".image-checkbox").each(function() {
if ($(this).find('input[type="checkbox"]').first().attr("checked")) {
$(this).addClass('image-checkbox-checked');
} else {
$(this).removeClass('image-checkbox-checked');
}
});
// sync the state to the input
$(".image-checkbox").on("click", function(e) {
if ($('.image-checkbox-checked').length === 3 && !$(this).hasClass('image-checkbox-checked')) return;
$(this).toggleClass('image-checkbox-checked');
var $checkbox = $(this).find('input[type="checkbox"]');
$checkbox.prop("checked", !$checkbox.prop("checked"))
e.preventDefault();
});
.nopad {
padding-left: 0 !important;
padding-right: 0 !important;
}
/*image gallery*/
.image-checkbox {
cursor: pointer;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 4px solid transparent;
margin-bottom: 0;
outline: 0;
}
.image-checkbox input[type="checkbox"] {
display: none;
}
.image-checkbox-checked {
border-color: #4783B0;
}
.image-checkbox .fa {
position: absolute;
color: #4A79A3;
background-color: #fff;
padding: 10px;
top: 0;
right: 0;
}
.image-checkbox-checked .fa {
display: block !important;
}
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<!--
Image Checkbox Bootstrap template for multiple image selection
https://www.prepbootstrap.com/bootstrap-template/image-checkbox
-->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="container">
<h3>Bootstrap image checkbox(multiple)</h3>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
<input type="checkbox" name="image[]" value="" />
<i class="fa fa-check hidden"></i>
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
<input type="checkbox" name="image[]" value="" />
<i class="fa fa-check hidden"></i>
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
<input type="checkbox" name="image[]" value="" />
<i class="fa fa-check hidden"></i>
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
<input type="checkbox" name="image[]" value="" />
<i class="fa fa-check hidden"></i>
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
<input type="checkbox" name="image[]" value="" />
<i class="fa fa-check hidden"></i>
</label>
</div>
</div>
推荐阅读
- python - 查看 csv 文件的各种条件
- android - 改造挂起函数引发一般错误
- sql - 查询两个表之间的日志和访问
- java - 同时使用 Java 1.7 和 1.8
- javascript - 如何解释 vue.js 中 console.log() 的这种奇怪行为?
- shell - 无法回显变量值
- zend-framework - Zend 框架 OR 运算符使用
- python - 如果日期字符串具有不同的格式,则在 python 中将字符串转换为日期
- visual-studio-code - VS Code:替换内置变量launch.json中的字符
- python - 写入函数中的线程 Thread-10 错误,TypeError:write() 参数必须是 str,而不是字节