我想检查加载时选中了多少个复选框,并且不允许超过特定数量的复选框。
我有以下表格:
<div id="checkbox" class="">
<%= form.collection_check_boxes(:category_ids, Category.all, :id, :name, :multiple => true) do |c| %>
<%= c.label class:"form-check-inline" do %>
<%= c.check_box + c.text %>
<% end %>
<% end %>
</div>
然后这个 Javascript:
<script>
$(document).on('turbolinks:load', function(){
$('#checkbox input:checkbox').change(function () {
var $cs=$('#checkbox input:checkbox:checked');
if ($cs.length >= 4) {
$('#checkbox input:checkbox:not(:checked)').attr("disabled", true);
}
else{
$('#checkbox input:checkbox').attr("disabled", false);
}
});
});
</script>
这虽然有效,但它不会检查负载。因此,从技术上讲,有人可以在第一次提交时选择 4 个,然后重新更新并勾选另一个 5 个,依此类推。
这有效,但我想知道是否可以将此代码简化为一个:
$(document).on('turbolinks:load', function(){
$('#checkbox input:checkbox').change(function () {
var $cs=$('#checkbox input:checkbox:checked');
if ($cs.length >= 4) {
$('#checkbox input:checkbox:not(:checked)').attr("disabled", true);
}
else{
$('#checkbox input:checkbox').attr("disabled", false);
}
});
});
$(document).on('turbolinks:load', function(){
var $cs=$('#checkbox input:checkbox:checked');
if ($cs.length >= 4) {
$('#checkbox input:checkbox:not(:checked)').attr("disabled", true);
}
else{
$('#checkbox input:checkbox').attr("disabled", false);
};
});
这可能还是唯一的选择?
最佳答案
您可以通过触发其中一个复选框的事件来消除重复:
$(document).on('turbolinks:load', function(){
$('#checkbox input:checkbox').change(function () {
// business logic
// now trigger event on first checkbox
}).first().change()
})
或者,将所有业务逻辑包装在命名函数中,并在页面加载时调用它,并将其作为引用传递给更改事件监听器
function updateCheckboxes() {
var $cs = $('#checkbox input:checkbox:checked');
if ($cs.length >= 4) {
$('#checkbox input:checkbox:not(:checked)').attr("disabled", true);
} else {
$('#checkbox input:checkbox').attr("disabled", false);
}
}
$(document).on('turbolinks:load', function() {
updateCheckboxes();
$('#checkbox input:checkbox').change(updateCheckboxes)
})
关于javascript - 如何在加载时检查数字或选中的复选框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55393828/