javascript - 如何为 Bootstrap 复选框徽章分配唯一 ID？

Question

我正在开发一个管理页面，您可以在其中列出所有用户。在一个表中你可以看到每个用户的权限。

我想使用一个复选框，通过使用 ajax(根据徽章复选框表示的给定权限)自动将数据库列值更新为 true 或 false .

我找到了这个badge checkbox .和 jsfiddle is here .

但是，有一个问题。当有多于一行时，复选框功能将不再起作用。此外，如果您更改任何徽章的默认 ID，这将不再有效，如图所示 now in this fiddle .

如何让这些徽章适用于多行并使用它们自己的 ID？

例如，我想为所有行分配 id="user-{{id}}-permissionName"而不是 id="success"。

Answer 1

您实际上可以更改任何 badge 的默认 id 并且如果您更改 id 它实际上可以工作，但您需要更改它的父 label 元素的 for 属性，它用于定位特定的 checkbox

例如:

<label for="danger1" class="btn btn-danger btn-xs">Query 
     <input type="checkbox" id="danger1" class="badgebox"/>
     <span class="badge">&check;</span>
</label>

DEMO