<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.3.slim.js" integrity="sha256-DKU1CmJ8kBuEwumaLuh9Tl/6ZB6jzGOBV/5YpNE2BWc=" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<div id="div1" style="border:1px solid blue; width:300px;">
<input class="sev" id="chk1" type="checkbox">
<label for="chk1">Check 1</label>
<input class="sev" id="chk2" type="checkbox">
<label for="chk2">Check 2</label>
<input class="sev" id="chk3" type="checkbox">
<label for="chk3">Check 3</label>
</div>
<div id="div2" class="orphan" style="border:1px solid green; width:300px; margin-top:50px;">
<input class="orp" id="chk4" type="checkbox">
<label for="chk4">Check 4</label>
<input class="orp" id="chk5" type="checkbox">
<label for="chk5">Check 5</label>
<input class="orp" id="chk6" type="checkbox">
<label for="chk6">Check 6</label>
</div>
</body>
</html>假设我有2个div，每个div有3个复选框。
我的目标是当用户选中其中一个组中的复选框时，我希望禁用另一个组，这样就无法进行任何选择。但是，我希望允许用户在一个组中选择任意多个复选框。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.3.slim.js" integrity="sha256-DKU1CmJ8kBuEwumaLuh9Tl/6ZB6jzGOBV/5YpNE2BWc=" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<div id="div1" style="border:1px solid blue; width:300px;">
<input id="chk1" type="checkbox">
<label for="chk1">Check 1</label>
<input id="chk2" type="checkbox">
<label for="chk2">Check 2</label>
<input id="chk3" type="checkbox">
<label for="chk3">Check 3</label>
</div>
<div id="div2" style="border:1px solid green; width:300px; margin-top:50px;">
<input id="chk4" type="checkbox">
<label for="chk4">Check 4</label>
<input id="chk5" type="checkbox">
<label for="chk5">Check 5</label>
<input id="chk6" type="checkbox">
<label for="chk6">Check 6</label>
</div>
</body>
</html>因此，如果用户选中div 1中的chk 1，则禁用dev 2中的所有复选框。
老实说，我正在与此斗争，并不知道如何做到这一点。
好吧，我知道了。自从我接触Jquery/JS已经有2年了，所以请原谅我。
我把这些放在一起看起来很有效：
$(document).ready(function(){
$('.sev').on('change',function(){
var isChecked = ($('.sev:checkbox:checked').length > 0) ? true : false;
$('#div2 input').prop('disabled',isChecked);
});
$('.orp').on('change',function(){
var isChecked = ($('.orp:checkbox:checked').length > 0) ? true : false;
$('#div1 input').prop('disabled',isChecked);
});
});我想我的问题是我怎样才能把它变成一个单独的句柄？所以我没有两个类的两个单独的句柄。
3条答案
按热度按时间bttbmeg01#
下面是如何使用jQuery实现这一点;基本上就是监听所有复选框上的change事件。一旦事件发生：
div-thisDiv;div-otherDivthisDiv中是否有任何选中的复选框，设置otherDiv的disabled属性的复选框就是这样!
x一个一个一个一个x一个一个二个x
dy1byipe2#
如果您将“chk1”类添加到div1输入中，则此JQuery代码应该能够实现您所期望的功能：
8i9zcol23#