单击复选框后如何冻结复选框？我尝试了，但它不起作用答案

【问题标题】：How to freeze the checkbox after clicking checkbox? I try it but it not working单击复选框后如何冻结复选框？我尝试了，但它不起作用
【发布时间】：2021-09-01 07:05:52
【问题描述】：

我尝试冻结复选框，但它不起作用。我提到复选框的名称为 is_top_property。请帮助我。代码在这里

<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>
            public function check(){
                if($("is_top_property").is(":checked")){
                    alert("Thanks for selecting");
                    $('is_top_property').attr('disabled',true);
                }
            }
            </script>                                        
               
        </div>
    </div>
</div>

【问题讨论】：

向输入添加一个类，如class="is_top_property，然后在$("is_top_property") 中添加缺少的.。因为$("is_top_property") 表示您正在寻找<is_top_property> 元素，而该元素当然不存在。
public function check(){ ??这是 JavaScript，不是 JAVA。删除公众

标签： php jquery laravel

【解决方案1】：

这是在 jQuery 中正确编写示例的方法：

使用正确的选择器 - 这里是$("[name=is_top_property]")，但您也可以添加一个类并使用$(".is_top_property")
不要使用内联事件处理
我们需要在发出警报之前超时以选中该框
我也添加了代码以在视觉上禁用标签

$(function() {
  $("[name=is_top_property]").on("change", function() {
    const checked = this.checked;
    if (checked) setTimeout(function() { alert("Thanks for selecting") }, 10); // give time to show the checkmark
    $(this)
      .prop('disabled', checked)
      .parent('label').toggleClass("disabled", checked)
  });
});

.disabled {
  color: grey
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input type="checkbox" name="is_top_property" value="1"> Enable Top Property</label>

【讨论】：

【解决方案2】：

这里不需要Check()函数，只需要在dom元素中找到复选框并在它被选中时禁用。

$(document).ready(function() {
  $("#is_top_property").click(function(){              
        if($(this).prop("checked") == true){
             $(this).attr('disabled',true);
        }
   });
 }

【讨论】：