如何在jQuery中阻止非指定data-id复选框的勾选事件？

问题情况 #

页面里有多个表单，每个表单内的复选框ID相同但data-id属性值不同。当前点击复选框时关联功能可正常运行，但点击另一个表单的复选框后，之前激活的复选框会失效。需求是：点击某复选框时，仅让与它所在表单data-id一致的元素执行逻辑，其他不同data-id的复选框不触发事件或不执行对应函数。

示例代码 #

HTML代码 #

<div>
    <form class="form-inline" data-id="45677-ff">
        <div class="col-xs-3">
            <div class="pic-container">
                <label>
                    <span><input type="checkbox" id="clickable" data-id="45677-ff">Merge</span><br>
                 </label>
            </div>
            <div class="box hidden" id="45677-ff"></div>
        </div>
    </form>
    <form class="form-inline" data-id="46g677-ee">
        <div class="col-xs-3">
            <div class="pic-container">
                <label>
                    <span><input type="checkbox" id="clickable" data-id="46g677-ee">Merge</span><br>
                 </label>
            </div>
            <div class="box hidden" id="46g677-ee"></div>
        </div>
    </form>
</div>

JavaScript代码 #

$(document).on("click","#clickable",function(this) {
    var checked = $(this).is(":checked");
    if(checked){
     // 这里是显示/隐藏对应data-id的div的代码
    }
});

解决办法 #

方案1：修复重复ID（最推荐） #

HTML规范要求页面内元素ID必须唯一，重复ID是导致问题的核心原因。优先将复选框的id改为类名，比如class="clickable"，从根源避免绑定冲突：

修改后的复选框代码：

<input type="checkbox" class="clickable" data-id="45677-ff">Merge
<!-- 另一个表单内的复选框 -->
<input type="checkbox" class="clickable" data-id="46g677-ee">Merge

调整后的JS逻辑：

$(document).on("click", ".clickable", function() {
    // 获取当前复选框所在表单的data-id
    var currentFormId = $(this).closest('form').data('id');
    var isChecked = $(this).is(":checked");
    
    if (isChecked) {
        // 显示当前复选框对应的div
        $('#' + $(this).data('id')).removeClass('hidden');
        
        // 重置其他表单内的复选框状态并隐藏对应div
        $('.clickable').not(this).each(function() {
            if ($(this).closest('form').data('id') !== currentFormId) {
                $(this).prop('checked', false);
                $('#' + $(this).data('id')).addClass('hidden');
            }
        });
    } else {
        // 取消选中时隐藏对应div
        $('#' + $(this).data('id')).addClass('hidden');
    }
});

方案2：不修改ID的临时处理（不推荐） #

如果暂时无法修改ID，可通过事件对象判断实际触发元素，规避重复ID的绑定问题：

$(document).on("click", "#clickable", function(event) {
    // 仅处理实际点击的元素，其他重复ID元素直接跳过
    if (event.target !== this) return;
    
    var currentFormId = $(this).closest('form').data('id');
    var isChecked = $(this).is(":checked");
    
    if (isChecked) {
        $('#' + $(this).data('id')).removeClass('hidden');
        
        // 过滤其他表单的复选框，重置状态
        $('#clickable').not(this).each(function() {
            if ($(this).closest('form').data('id') !== currentFormId) {
                $(this).prop('checked', false);
                $('#' + $(this).data('id')).addClass('hidden');
            }
        });
    } else {
        $('#' + $(this).data('id')).addClass('hidden');
    }
});

注意点 #

• 务必优先修复重复ID问题，重复ID会导致DOM选择器行为不可预测（比如$('#clickable')只会返回第一个匹配元素），这是之前激活复选框失效的核心原因。
• 利用closest('form')获取当前复选框所在表单的data-id，以此为标记区分不同表单的元素，可精准控制仅当前表单的逻辑执行。

内容的提问来源于stack exchange，提问作者Marduk HS