英文:
How to make 2 groups of checkboxes mutually exlusive
问题
以下是您要翻译的代码部分：
<!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>
<!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>
$(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);
});
});
如您所需，我已提供了翻译的代码部分，没有包含额外的内容。
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
Let's say I have 2 divs with 3 checkboxes in each.
My goal is when user selects a checkbox in one of the groups, I want to disable the other group so no selections can be made. However I want to allow users to select as many checkboxes in one group as they want.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
So if user checks chk1 in div1, disable all checkboxes in dev2.
I honestly am struggling with this and have no clue how to do this.
Okay I figured it out. It's been about 2 years since i touched Jquery/JS so forgive me.
I put this together and it seems to work:
$(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);
});
});
I guess my question would be how can I make this into a single handler? so I don't have 2 separate handlres for 2 classes.
答案1
得分: 1
以下是使用jQuery执行此操作的方法；基本上监听所有复选框上的更改事件。一旦事件发生：
- 确定发生此事件的
div-thisDiv； - 然后派生其他
div-otherDiv； - 根据
thisDiv中是否有（或没有）任何选中的复选框设置otherDiv的复选框的禁用属性。
就是这样！
$('#div1 :checkbox, #div2 :checkbox').on('change', function(e) {
const thisDiv = $(this).parent();
const otherDiv = $('#div1,#div2').not(thisDiv);
otherDiv.find(':checkbox').prop('disabled', thisDiv.find(':checkbox:checked').length);
});
演示 ...
<!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>
英文:
Here is how to do it with jQuery; basically listen for the change event on all checkboxes. Once the event occurs:
- determine the
divin which this occurred -thisDiv; - then derive the other
div-otherDiv - Set the checkboxes of
otherDiv's disabled property based on whether there are (or not) any checked checkboxes inthisDiv
That's it!
$('#div1 :checkbox, #div2 :checkbox').on('change', function(e) {
const thisDiv = $(this).parent();
const otherDiv = $('#div1,#div2').not(thisDiv);
otherDiv.find(':checkbox').prop('disabled', thisDiv.find(':checkbox:checked').length);
});
DEMO ...
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-js -->
$('#div1 :checkbox, #div2 :checkbox').on('change', function(e) {
const thisDiv = $(this).parent();
const otherDiv = $('#div1,#div2').not(thisDiv);
otherDiv.find(':checkbox').prop('disabled', thisDiv.find(':checkbox:checked').length);
});
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
答案2
得分: 0
如果您将 "chk1" 类添加到您的 div1 输入元素中，此 JQuery 代码应该能够实现您想要的效果：
$(".chk1").on("input", function() {
if ($(this)[0].checked) {
$("#div2 input").prop("disabled", true);
} else {
$("#div2 input").prop("disabled", false);
}
});
英文:
If you add "chk1" class to your div1 inputs this JQuery code should achieve what you're looking for:
$(".chk1").on("input", function() {
if ($(this)[0].checked) {
$("#div2 input").prop("disabled", true);
} else {
$("#div2 input").prop("disabled", false);
}
});
答案3
得分: 0
$(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);
});
});
英文:
$(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);
});
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论