满足条件时启用默认禁用的Checkbox问题排查

问题根源 #

1. 字符串分割后存在空格：data-svcjurisdiction的值是"SCPB - LON, Guernsey"，用,分割后第二个元素是" Guernsey"（前面带空格），而data-rcpjurisdiction的值是"Guernsey"，导致includes匹配失败。
2. jQuery设置禁用状态的方法错误：对于disabled这类布尔属性，使用attr()设置false不会正确生效，应该用prop()方法操作DOM属性。

修复后的代码 #

JavaScript代码 #

$('input[type=checkbox]').each(function() {
    // 分割后去除每个元素的首尾空格
    var svcjurisdiction = $(this).attr("data-svcjurisdiction").split(',').map(item => item.trim());
    var rcpjurisdiction = $(this).attr("data-rcpjurisdiction");

    if (svcjurisdiction.includes(rcpjurisdiction)) {
        // 使用prop()设置disabled状态
        $(this).prop("disabled", false);
    }
});

HTML代码（无需修改） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="services" value="13301686-3218159" data-rcpjurisdiction="Guernsey" data-svcjurisdiction="SCPB - LON, Guernsey" type="checkbox" title="Text to show" checked disabled/>

关键修改点说明 #

• 去除空格：通过map(item => item.trim())对分割后的每个字符串做首尾空格清理，确保匹配的字符串格式一致。
• 改用prop()：jQuery中，布尔属性（如disabled、checked）的状态控制应该用prop()，它直接操作DOM元素的属性状态，而attr()仅操作HTML标签上的属性值，对于布尔属性的处理逻辑不同。

内容的提问来源于stack exchange，提问作者David Garcia