实现交互式只读复选框

问题描述

我尝试使用以下代码实现交互式只读复选框。

但是当我更改了表单中的值,将其保存到DB,并且关闭了下拉菜单,但更改仍然没有反映在只读区域中。

查看(./layout/app.blade.PHP

<head>
    ...
        <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js" defer></script>
    ...
        <style>
            input[type="checkBox"][readonly] {
                pointer-events: none;
            }
        </style>
    ...
</head>

查看(livewire/test/test.blade.PHP

...
// readonly area
<div>
   <div>
      <input wire:model="check1" type="checkBox" id="check1">
      <label for="check1">
   </div>
   <div>
      <input wire:model="check2" type="checkBox" id="check2">
      <label for="check2">
   </div>
</div>

...
...

// edit form area in drop-down menu in the same page,placed with @include('livewire.components.test.edit.blade.PHP)
<div>
   <div>
      <input wire:model="check1" type="checkBox" id="check1">
      <label for="check1">
   </div>
   <div>
      <input wire:model="check2" type="checkBox" id="check2">
      <label for="check2">
   </div>
   <button wire:click="editTest">Edit Test</button>  //edit method
</div>
 

我在只读区域尝试过这些东西... wire:model.deferwire:model.lazywire:model.debounce.1000msvalue="{{ $check1}}" 但仍然无法正常工作。

让我知道如何实施它。

技术版本...

"PHP": "^7.3|^8.0","laravel/framework": "^8.12","livewire/livewire": "^2.0"
"tailwindcss": "^1.8.0","alpinejs": "^2.8.0",

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)