Struts2中如何实现<s:checkbox>复选框的动态启用与禁用？

云原生阿岚

2026-10-2

问题根因

body标签使用了错误的自闭合写法<body onload="myTest()" />，所有页面内容实际不在body节点内部，onload事件触发时复选框还未完成DOM渲染，document.getElementById('box1')返回空值，逻辑判断始终命中禁用box2的分支，导致box2一直不可用。
仅在页面加载时触发函数无法联动box1的切换操作，需要额外监听box1的状态变化事件，才能实现选中box1时实时启用box2的效果。

修复步骤

1. 调整JSP页面结构

修正body标签的闭合方式，同时给box1添加状态变化监听：

<body onload="myTest()">
<div class="form-group row">
    <label class="col-sm-3 col-form-label required">
        <s:text name="box1" />
    </label>
    <div class="col-sm-9">
        <s:checkbox id="box1" name="box1" onchange="myTest()"> </s:checkbox>
    </div>
</div>
<div class="form-group row">
    <label class="col-sm-3 col-form-label required">
        <s:text name="box2" />
    </label>
    <div class="col-sm-9">
        <s:checkbox id="box2" name="box2"></s:checkbox>
    </div>
</div>
</body>

2. 优化JS逻辑（可选）

可以添加节点存在性判断，避免DOM未加载完成时控制台报错：

function myTest() {
  const checkBox1 = document.getElementById('box1');
  // 节点不存在时直接终止逻辑
  if (!checkBox1) return;
  $('#box2').prop('disabled', !checkBox1.checked);
}