点击复选框后如何将其冻结禁用？现有代码实现不生效求解决方案

问题原因 #

• 语法错误：前端JavaScript定义函数不需要加public关键字，public是PHP等服务端语言的类方法修饰符，放在JS代码中会直接触发语法错误，导致函数完全无法执行
• jQuery选择器错误：你要匹配name为is_top_property的元素，正确的属性选择器写法为$('input[name="is_top_property"]')，直接写$("is_top_property")是在查找标签名为is_top_property的元素，自然匹配不到任何节点
• 表单属性设置不规范：修改disabled这类布尔类型的表单状态属性时，优先使用prop()方法而非attr()，prop()可以正确更新元素的动态运行状态，避免出现属性已设置但功能不生效的问题

修正后完整代码 #

<div class="panel">
    <div class="panel-title"><strong>{{__("Top Property")}}</strong></div>
    <div class="panel-body">
        <div class="form-group">
            <input type="checkbox" name="is_top_property" onclick="check();" @if($row->is_top_property) checked @endif value="1"> {{__("Enable Top Property")}}
            <script>
            function check(){
                const targetCheckbox = $('input[name="is_top_property"]');
                if(targetCheckbox.is(":checked")){
                    alert("Thanks for selecting");
                    targetCheckbox.prop('disabled', true);
                }
            }
            </script>                                        
               
        </div>
    </div>
</div>

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