如何为 bootstrap 复选框徽章分配唯一 ID？

Question

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

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

我找到了这个 badge checkbox. And the 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

Answer 2

当您有一排重复元素，其中可能包含多个操作时，通常最简单的方法是将所需数据存储在该行本身上。然后使用类或者数据属性来定义控件的类型。

<div class="row" data-id="{{id}}" data-permission="user-{{id}}-permissionName">
   <input type="checkbox" data-action="delete" class="btn btn-delete">
</div>

JS

$(':checkbox').change(function(){
    var $row = $(this).closest('.row'),
        rowData = $row.data();
    var action = $(this).data('action');
    var id = rowData.id;
    var permission = rowData.permission;        
});

如何为 bootstrap 复选框徽章分配唯一 ID？

How to assign unique id for bootstrap checkbox badges?

javascript

jquery

twitter-bootstrap

checkbox

badge