How to stop checkbox event bubbling with bootstrap checkbox and jquery-CodePudding

I'm having what appears to be an unsolved issue that I'm hoping someone has the answer these days.

Essentially as per the title, I have a checkbox inside a bootstrap card which has a .on("click"..) that toggles the checkbox. However, I cannot get the checkbox to not bubble its event up to the card essentially making clicking on the check box useless.

I have tried every combination of

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

there is and nothing stops it. I have done this on both click and change events.

I saw in this thread there's something called legacy-pre-activation-behavior but no solution is offered for that.

My HTML (in js) is as follows:

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)

Any thoughts? Thanks for your time :)

CodePudding user response：

So it appears there isn't an answer for this question. I created my own work around using Font Awesome Icons instead of input elements.

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)

And the selectAll code

 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)
     });