如何使用bootstrap checkbox和jquery停止checkbox事件冒泡

5w9g7ksd 于 2022-11-22 发布在 jQuery

关注(0)|答案(1)|浏览(188)

我有一个似乎是一个未解决的问题，我希望有人有答案这些天。
基本上按照标题，我有一个复选框内的引导卡，其中有一个.on（“点击”..），切换复选框。但是，我不能让复选框不冒泡的事件，以卡基本上使点击复选框无用。
我试过了所有

event.stopPropogation()
event.preventDefault()
event.stopImmediatePropogation()
return false

我已经在click和change事件上做过了。
我在这个thread中看到了一个叫做“legacy-pre-activation-behavior”的东西，但是没有提供解决方案。
我的HTML（js格式）如下：

let card = $("<div class='card' style='cursor: pointer'></div>")
let cardHeader = $("<div class='card-header'></div>")
let cardHeaderRow = $("<div class='row'></div>")
let selectAccount = $(`<input type='checkbox' data-uam-linkeditem=${account} class='col-sm-1 btn btn-outline-primary account-select' title='Select Account'/>`)
selectAccount.prop("checked", preCheckBoxes)

selectAccount.on("click", (e) => {
   e.stopPropagation()
   return false
})

selectAccount.on("change", (e) => {
   e.stopPropagation()
   return false
})

card.on('click', (event) => {
   selectAccount.prop("checked", !selectAccount.prop("checked"))
})

card.append(cardHeader)
cardHeader.append(cardHeaderRow)
cardHeaderRow.append(selectAccount)

有什么想法吗？谢谢你的时间：）

jquery

来源：https://stackoverflow.com/questions/74384999/how-to-stop-checkbox-event-bubbling-with-bootstrap-checkbox-and-jquery

1条答案

按热度按时间

rta7y2nd1#

因此，这个问题似乎没有答案。我创建了我自己的工作，使用字体真棒图标，而不是 input 元素。

let card = $("<div class='card' style='cursor: pointer'></div>")
let cardHeader = $("<div class='card-header'></div>")
let cardHeaderRow = $("<div class='row'></div>")

let selectIconClass = preCheckBoxes ? 'fas fa-check-square' : 'far fa-square' 
let selectDivCheckedClass = preCheckBoxes ? 'checked' : 'unchecked'
let selectAccount = $(`<div class='col-sm-1 account-select ${selectDivCheckedClass}'><i class='${selectIconClass} text-primary' /></div>`)

card.on('click', (event) => {
    if (selectAccount.hasClass('checked')) {
        selectAccount.removeClass('checked').addClass('unchecked')
        selectAccount.children().removeClass(['fas', 'fa-check-square']).addClass(['far', 'fa-square'])
    } else {
        selectAccount.addClass('checked').removeClass('unchecked')
        selectAccount.children().addClass(['fas', 'fa-check-square']).removeClass(['far', 'fa-square'])
    }
})

card.append(cardHeader)
cardHeader.append(cardHeaderRow)
cardHeaderRow.append(selectAccount)

中的每一个
和 selectAll 代码

selectAllBox.change((event) => {
     let checked = event.target.checked;
     let setAccountSelectToClass = checked ? 'checked' : 'unchecked'
     let removeClassFromAccountSelect = !checked ? 'checked' : 'unchecked'
     let iconClassesToSet = checked ? ['fas', 'fa-check-square'] : ['far', 'fa-square']
     let iconClassesToRemove = !checked ? ['fas', 'fa-check-square'] : ['far', 'fa-square']
     $(".account-select").each(function (i, selectAccount) {
         selectAccount = $(selectAccount)  
         selectAccount.addClass(setAccountSelectToClass).removeClass(removeClassFromAccountSelect)
         selectAccount.children().addClass(iconClassesToSet).removeClass(iconClassesToRemove)
     });

格式

赞(0）回复(0）举报 2022-11-22

我来回答

如何使用bootstrap checkbox和jquery停止checkbox事件冒泡

1条答案

相关问题

热门标签

最新问答