分类信息的checkbox如何做互斥选项？

镖师 · 发表于 2023-4-1 08:33:39

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

分类信息的checkbox如何做互斥选项？分类,分类信息,信息,checkbox,如何

如图，希望达到的功能是：选择最后一项后，前面的所有选项都无法选择。
我知道答案回答被采纳将会获得1 贡献已有1人回答

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

独家记忆 · 发表于 2023-4-1 08:34:25

多选一直接用radio，如果非要用checkbox的话需要写js

Discuz智能体 · 发表于 2025-3-17 22:18:56

要实现分类信息中的 `checkbox` 互斥选项功能，即选择最后一项后，前面的所有选项都无法选择，可以通过 JavaScript 来实现。以下是一个简单的实现思路：

### 1. HTML 结构
假设你的分类信息中有多个 `checkbox`，最后一个 `checkbox` 的 `id` 为 `lastOption`，前面的 `checkbox` 的 `class` 为 `otherOptions`。

<input type="checkbox" class="otherOptions" name="option[]" value="1"> 选项1
<input type="checkbox" class="otherOptions" name="option[]" value="2"> 选项2
<input type="checkbox" class="otherOptions" name="option[]" value="3"> 选项3
<input type="checkbox" id="lastOption" name="option[]" value="4"> 最后选项

复制代码

### 2. JavaScript 实现
使用 JavaScript 监听最后一个 `checkbox` 的点击事件，当它被选中时，禁用前面的所有 `checkbox`。

document.getElementById('lastOption').addEventListener('change', function() {
var otherOptions = document.querySelectorAll('.otherOptions');
if (this.checked) {
otherOptions.forEach(function(option) {
option.disabled = true;
});
} else {
otherOptions.forEach(function(option) {
option.disabled = false;
});
}
});

复制代码

### 3. 解释
- `document.getElementById('lastOption')`：获取最后一个 `checkbox` 元素。
- `addEventListener('change', function() {...})`：监听 `change` 事件，当 `checkbox` 的状态发生变化时触发。
- `document.querySelectorAll('.otherOptions')`：获取所有前面的 `checkbox` 元素。
- `option.disabled = true;`：禁用前面的 `checkbox`。
- `option.disabled = false;`：启用前面的 `checkbox`。

### 4. 完整代码
将上述 HTML 和 JavaScript 代码整合到一起：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>互斥选项示例</title>
</head>
<body>
<input type="checkbox" class="otherOptions" name="option[]" value="1"> 选项1
<input type="checkbox" class="otherOptions" name="option[]" value="2"> 选项2
<input type="checkbox" class="otherOptions" name="option[]" value="3"> 选项3
<input type="checkbox" id="lastOption" name="option[]" value="4"> 最后选项
<script>
document.getElementById('lastOption').addEventListener('change', function() {
var otherOptions = document.querySelectorAll('.otherOptions');
if (this.checked) {
otherOptions.forEach(function(option) {
option.disabled = true;
});
} else {
otherOptions.forEach(function(option) {
option.disabled = false;
});
}
});
</script>
</body>
</html>

复制代码

### 5. 测试
- 打开页面后，尝试选择前面的 `checkbox`，它们应该可以正常选择。
- 选择最后一个 `checkbox` 后，前面的 `checkbox` 应该被禁用，无法选择。
- 取消选择最后一个 `checkbox` 后，前面的 `checkbox` 应该恢复可用状态。

### 6. 注意事项
- 如果你在 Discuz! 模板中使用此功能，请确保将 JavaScript 代码放在模板的适当位置，或者通过外部 JavaScript 文件引入。
- 如果页面中有多个类似的互斥选项组，请确保每个组的 `id` 和 `class` 是唯一的，避免冲突。

通过这种方式，你可以轻松实现分类信息中 `checkbox` 的互斥选项功能。
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。