Блог

Главная - Вопросы по программированию - Начальная загрузка: нежелательное поведение аккордеона

Начальная загрузка: нежелательное поведение аккордеона

#bootstrap-4

#начальная загрузка-4

Вопрос:

Следующий код работает нормально …. за исключением…. Я не хочу разворачивать или вызывать строку, когда пользователь нажимает на флажок. Как я могу заблокировать это? (У меня подключен jquery. Мне интересно, могу ли я использовать это для решения проблемы?)

 <table class="table table-hover">
    <thead>
        <td>
            <h5>Select All:</h5>
        </td>
        <td>
            <h5><input type="checkbox" id="checkAll"></h5>
        </td>
    </thead>

    <tbody>
        <tr>
            <td colspan="2"> <input type="submit" , value="Replace Selected"> </td>
        </tr>
        <tr class="accordion-toggle" data-toggle="collapse" data-target="#tgt1">

            <td> Heading </td>
            <td><input type="checkbox" value="92340332" name="c1"></td>
        </tr>
        <tr>
            <td colspan="2">
                <div id="tgt1" class="collapse">content content</div>
            </td>
        </tr>
        <tr class="accordion-toggle" data-toggle="collapse" data-target="#tgt2">
            <td>Heading</td>
            <td><input type="checkbox" value="146735230" name="c2"></td>
        </tr>
        <tr>
            <td colspan="2">
                <div id="tgt2" class="collapse">content content</div>
            </td>
        </tr>
    </tbody>
</table>

Ответ №1:

Вам нужно будет использовать e.stopPropagation(); для вашего checkbox , чтобы предотвратить.

  $("myElement").on('click', function (e) { e.preventDefault(); })

или

 $('input').click(function(e) {
    e.stopPropagation(); // prevents event e from going to parent
});

Комментарии:

1. учитывая, что у меня есть до 100 динамически именованных флажков, я предполагаю, что второе решение подойдет мне лучше?

2. @Jake да, вы также можете присвоить класс своему флажку.