当class on li不存在时禁用按钮

disable button when class on li doesnt exist

本文关键字：按钮 不存在 class on li      更新时间：2023-09-26

我想防止在列表中没有选择项目时单击按钮。只有当列表中至少有一个具有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;}

小提琴

尝试使用这个脚本，但我如何将属性从禁用切换到启用?

if( $('.list .label-list').hasClass('highlight') === true ) 
{
 $('#search').addClass('active');
}

你应该像

那样测试: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>

你可以用这个jquery选择器计算所有选中的复选框

$('input[type=checkbox]:checked').length

返回选中的复选框的总数

只需添加这个事件侦听器，每当复选框的值发生变化时，它就会发生

$(document).on('change', 'input[type=checkbox]', function() {
    var disabled = $('input[type=checkbox]:checked').length ? false: true;
    $("#search").attr('disabled', disabled);
})
演示

相关文章：