我想防止在列表中没有选择元素时单击按钮。仅当列表中至少有 1 个具有 highlight
类时才启用它。
HTML
<ul class="list">
<li><input type="checkbox" name="cat[]" id="1" value="227">
<label class="label-list" for="1">Select</label></li>
<li><input type="checkbox" name="cat[]" id="2" value="227">
<label class="label-list" for="2">Select</label></li>
<li><input type="checkbox" name="cat[]" id="3" value="227">
<label class="label-list" for="3">Select</label></li>
<li><input type="checkbox" name="cat[]" id="4" value="227">
<label class="label-list" for="4">Select</label></li>
</ul>
<input type="submit" id="search" class="btn-info" value="search" disabled>
脚本:
$(".list .label-list").click(function() {
$(this).toggleClass("highlight");
});
CSS:
.highlight {background:red;}
尝试使用此脚本,但如何将 attr 从禁用切换为启用?
if( $('.list .label-list').hasClass('highlight') === true )
{
$('#search').addClass('active');
}
最佳答案
您应该测试 is :checked
就像
var $checkb = $(".list").find("input[type='checkbox']"),
$search = $("#search");
$checkb.on("change", function(){
$search.prop("disabled", !$checkb.is(":checked"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
<li>
<label>
<input type="checkbox" name="cat[]" value="224">
Select
</label>
</li>
<li>
<label>
<input type="checkbox" name="cat[]" value="225">
Select
</label>
</li>
<li>
<label>
<input type="checkbox" name="cat[]" value="226">
Select
</label>
</li>
<li>
<label>
<input type="checkbox" name="cat[]" value="227">
Select
</label>
</li>
</ul>
<input type="submit" id="search" class="btn-info" value="search" disabled>
关于javascript - 当 li 上的类不存在时禁用按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40297710/