如何重新启用多选选择器

Posted 2023-03-14

【中文标题】如何重新启用多选选择器

【英文标题】：How to re-enable multiple select picker

【发布时间】：2022-01-06 07:00:29

【问题描述】：

我正在尝试使用此引导选择选择器，其中可以选择多个值，默认情况下我希望它被禁用。因此，为了启用它，必须按下一个按钮。问题是按下按钮不会重新启用该特定字段，与之链接的其他字段可以正常工作。

无论如何代码不起作用如下任何帮助将不胜感激。

    <form method="post" action="route('updateuser')">
      @csrf
      <table class="table  table-bordered">
        <thead>
          <tr>
            <th scope="col">ID</th>
            <th scope="col">User Name</th>
            <th scope="col">Email</th>
            <th scope="col">Role</th>
            <th scope="col">Sites</th>
            <th scope="col">Created At</th>
            <th scope="col">Updated At</th>
            <th scope="col">Edit</th>
          </tr>
        </thead>
        @if(count($users)!=0)
        @foreach($users as $user)
        <tr>
          <td><input type='text' name="id" placeholder="User ID" value=' $user->id ' readonly></td>
          <td><input type='text' name="name" placeholder="Name" value=' $user->name ' disabled></td>
          <td><input type='text' name="email" placeholder="Email" value=' $user->email ' disabled></td>
          <td><select name="role" disabled>
              <option>none</option>
              <option>Reporter</option>
              <option>Admin</option>
              <option>Super Admin</option>
            </select></td>
          <td><select class="selectpicker selectsite" multiple name="sitesSelected[]" disabled>
              <option selected> $site[0]->sitename
                < </option>
              <option> $site[1]->sitename </option>
              <option> $site[2]->sitename </option>
            </select></td>
          <td><input type='text' name="created_at" placeholder="created_at" value=' $user->created_at ' readonly></td>
          <td><input type='text' name="updated_at" placeholder="updated_at" value=' $user->updated_at ' readonly></td>
          <td><input type="button" name='edit' value='edit'>
            <input type="submit" name='save' value='save'>
            <button type="button" id="btnDelete" data-toggle="modal" data-target="#userModal" value=" $user->id ">Delete</button>
          </td>
        </tr>
        @endforeach
        @endif
      </table>
       $users->links() 
    </form>

 <script type="text/javascript">
   $(document).ready(function()
     $("form input[type=text]").prop("disabled",true);
     $("input[name=edit]").on("click",function()
       $(this).closest("tr").find("input,select").prop("disabled",false);
                     
     )
   )
              
 </script>

从代码中可以看出，我构建了一个表格，其中每一行代表网站的一个用户。不工作的部分是名为“sitesSelected[]”的选定元素，当按下编辑按钮时它不会重新启用，但是当按下编辑按钮时，所有其他元素都会重新启用。

【参考方案1】：

好吧，我对 Bootstrap 了解不多，但是由于选择元素中有多个属性，因此多重选择功能正在发挥作用。 （查看此链接https://www.w3schools.com/tags/att_select_multiple.asp 以更好地了解多重属性）。

因此，如果要启用或禁用它，只需删除或添加多个属性即可。下面的例子。

要删除元素的“禁用”属性：

$('select[name="role"]').removeAttr("disabled");

为元素添加多个属性：

$(".selectpicker selectsite").attr("multiple","true");

要删除元素的多个属性：

$(".selectpicker selectsite").attr("multiple","false");

您的问题有点令人困惑，但我已尽力而为，因为我也是新来的，而且我知道有人结束您的问题时的感受。无论如何，如果有疑问，请发表评论。

【讨论】：

感谢您的回复，不幸的是，我已经尝试了您的建议以及我在谷歌上可以找到的几乎所有内容。基本上我遇到的问题是默认情况下我希望所有元素都被禁用并通过按下“编辑”按钮重新启用。我目前在脚本元素中的代码适用于除“sitesSelected”之外的所有元素，不确定是否有我遗漏的东西，但我不明白为什么只有这个元素不受用于重新的 javascript 的影响-enale 元素

我建议你创建一个 test.html 文件并测试你的代码，如果一切正常......那么问题是内部崩溃，我的意思是元素受到其他一些 js 的影响代码，可能是引导程序的 JS 文件或任何其他代码。您的代码可能会两次针对同一元素，因为它会覆盖第一个。

创建该 test.html 文件并编写没有引导程序的原始代码然后检查，然后插入引导程序并再次检查...