从引导弹出框内的元素中删除类答案

【问题标题】：Remove class from element inside bootstrap popover从引导弹出框内的元素中删除类
【发布时间】：2019-03-09 12:36:42
【问题描述】：

我正在使用引导弹出框来显示收件人列表的可用操作列表。弹出框：

<ul class='list-unstyled recipients-popover'>
<li><a href='#' class='popover-item' onclick='openAddContactModal()'><i class='test'></i> &nbsp; Add contact</a></li>
<li><a href='#' class='popover-item'><i class='test'></i> &nbsp; Add contact list</a></li>
<li><a href='#' class='popover-item disabled' onclick='deleteContacts()'><i class='test'></i> &nbsp; Delete contacts</a></li>
<li><a href='#' class='popover-item' onclick='openAddGroupModal()'><i class='test'></i> &nbsp; Create new group</a></li>
<li><a href='#' class='popover-item disabled' onclick='openAddContactToGroupModal()'><i class='test'></i> &nbsp; Add contacts to group</a></li>
<li><a href='#' class='popover-item disabled'><i class='test'></i> &nbsp; Remove contacts from Group</a></li>
<li><a href='#' class='popover-item' onclick='openDeleteGroupModal()'><i class='test'></i> &nbsp; Delete Group</a></li>

上面是由下面的HTML触发的：

<a class="btn btn-link text-white" tabindex="0" role="button" data-html="true" data-trigger="focus" data-container="body" data-toggle="popover" data-placement="auto" data-content=" @include('recipient.actions-popover') ">

然后问题是当我尝试在弹出窗口上运行 javascript 时它不起作用。例如，如果我尝试运行：

$(document).on('change', '.checkable', function(e) {
    console.log("testing");
    $(".popover-item").removeClass('disabled');
});

虽然我确实看到了测试控制台日志，但禁用的类没有被删除。

任何人都可以帮助完成上述工作吗？

【问题讨论】：

checkable 在您的更改活动中在哪里？
它与 Javascript 在同一个文件中。 <input type="checkbox" name="recipient[3]" class="checkable" contactid="3">
你的代码对我来说很好。

标签： javascript jquery twitter-bootstrap popover

【解决方案1】：

如果您只想在复选框更改时删除一个类，这可以正常工作：

$(".checkable").change(function() {
       $(".popover-item").removeClass('disabled');
});

.disabled{
  color:red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='list-unstyled recipients-popover'>
<li><a href='#' class='popover-item' onclick='openAddContactModal()'><i class='test'></i> &nbsp; Add contact</a></li>
<li><a href='#' class='popover-item'><i class='test'></i> &nbsp; Add contact list</a></li>
<li><a href='#' class='popover-item disabled' onclick='deleteContacts()'><i class='test'></i> &nbsp; Delete contacts</a></li>
<li><a href='#' class='popover-item' onclick='openAddGroupModal()'><i class='test'></i> &nbsp; Create new group</a></li>
<li><a href='#' class='popover-item disabled' onclick='openAddContactToGroupModal()'><i class='test'></i> &nbsp; Add contacts to group</a></li>
<li><a href='#' class='popover-item disabled'><i class='test'></i> &nbsp; Remove contacts from Group</a></li>
<li><a href='#' class='popover-item' onclick='openDeleteGroupModal()'><i class='test'></i> &nbsp; Delete Group</a></li>

<label>Checkable</label> <input type="checkbox" name="recipient[3]" class="checkable" contactid="3">

【讨论】：