数据切换引导程序折叠复选框问题

Question

I've got some issues with data-toggle bootstrap in the code that i'm using.

When i want to hit the checkbox, the data-toggle is also triggered. Is there any way to prevent the data-toggle function when checkbox is clicked ? Or any solution

When i want to hit the checkbox, the data-toggle is also triggered. Is there any way to prevent the data-toggle function when checkbox is clicked ? Or any solution

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/> <table> <thead> <tr> <th rowspan="2" style="vertical-align: middle; text-align: center">No. Kegiatan</th> <th rowspan="2" style="vertical-align: middle; text-align: center">Nama</th> <th rowspan="2" style="vertical-align: middle; text-align: center">Pagu</th> <th colspan="2" style="vertical-align: middle; text-align: center">Aksi</th> <th rowspan="2" style="width:20%;vertical-align: middle; text-align: center">PPTK</th> </tr> </thead> <tbody> <tr id="5" data-toggle="collapse" data-target=".collapse-2"> <td style="width: 150px;">5</td> <td>BELANJA</td> <td>426,132,000 </td> <td class="text-center"> <input type="checkbox" name="cpaket[]" class="checkleng cpk1" value="BELANJA"> </td> <td class="text-center"> <input type="checkbox" name="canggaran[]" class="checkleng cang1" value="BELANJA"> </td> <td> <select class="form-control pkts1 akay show_only" name="pkt_pptk[]" style="display: none;"> <option value="">-- Pilih PPK --</option> </select> <select class="form-control anggs1 akay show_only" name="angg_pptk[]" style="display: none;"> <option value="">-- Pilih PPK --</option> </select> </td> </tr> <tr id="52" data-parent="#5" class="collapse-2 collapse in" data-toggle="collapse" data-target=".collapse-3-52" aria-expanded="true" style=""> <td style="width: 150px;">5 . 2</td> <td>BELANJA LANGSUNG</td> <td>426,132,000</td> <td class="text-center"> <input type="checkbox" name="cpaket[]" class="checkleng cpk2" value="BELANJA LANGSUNG"> </td> <td class="text-center"> <input type="checkbox" name="canggaran[]" class="checkleng cang2" value="BELANJA LANGSUNG"> </td> <td> <select class="form-control pkts2 akay show_only" name="pkt_pptk[]" style="display: none"> <option value="">-- Pilih PPK --</option> </select> <select class="form-control anggs2 akay show_only" name="angg_pptk[]" style="display: none"> <option value="">-- Pilih PPK --</option> </select> </td> </tr> <tr id="521" data-parent="#52" class="collapse-3-52 collapse in" data-toggle="collapse" data-target=".collapse-4-521" aria-expanded="true" style=""> <td style="width: 150px;">5 . 2 . 1</td> <td>Belanja Pegawai</td> <td>8,652,000</td> <td class="text-center"> <input type="checkbox" name="cpaket[]" class="checkleng cpk3" value="Belanja Pegawai"> <input type="checkbox" name="d_namacpk[]" class="cpk3" value="Belanja Pegawai" style="display: none"> <input type="checkbox" name="d_pagucpk[]" class="cpk3" value="8652000" style="display: none"> </td> <td class="text-center"> <input type="checkbox" name="canggaran[]" class="checkleng cang3" value="Belanja Pegawai"> </td> <td> <select class="form-control pkts3 akay show_only" name="pkt_pptk[]" style="display: none"> <option value="">-- Pilih PPK --</option> </select> <select class="form-control anggs3 akay show_only" name="angg_pptk[]" style="display: none"> <option value="">-- Pilih PPK --</option> </select> </td> </tr> </tbody> </table>

Answer 1

There is many way to do it but here is one simple method that stop Propagation

 $('input[type="checkbox"]').click(function(e){ e.stopPropagation() })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/> <table> <thead> <tr> <th rowspan="2" style="vertical-align: middle; text-align: center">No. Kegiatan</th> <th rowspan="2" style="vertical-align: middle; text-align: center">Nama</th> <th rowspan="2" style="vertical-align: middle; text-align: center">Pagu</th> <th colspan="2" style="vertical-align: middle; text-align: center">Aksi</th> <th rowspan="2" style="width:20%;vertical-align: middle; text-align: center">PPTK</th> </tr> </thead> <tbody> <tr id="5" data-toggle="collapse" data-target=".collapse-2"> <td style="width: 150px;">5</td> <td>BELANJA</td> <td>426,132,000 </td> <td class="text-center"> <input type="checkbox" name="cpaket[]" class="checkleng cpk1" value="BELANJA"> </td> <td class="text-center"> <input type="checkbox" name="canggaran[]" class="checkleng cang1" value="BELANJA"> </td> <td> <select class="form-control pkts1 akay show_only" name="pkt_pptk[]" style="display: none;"> <option value="">-- Pilih PPK --</option> </select> <select class="form-control anggs1 akay show_only" name="angg_pptk[]" style="display: none;"> <option value="">-- Pilih PPK --</option> </select> </td> </tr> <tr id="52" data-parent="#5" class="collapse-2 collapse in" data-toggle="collapse" data-target=".collapse-3-52" aria-expanded="true" style=""> <td style="width: 150px;">5 . 2</td> <td>BELANJA LANGSUNG</td> <td>426,132,000</td> <td class="text-center"> <input type="checkbox" name="cpaket[]" class="checkleng cpk2" value="BELANJA LANGSUNG"> </td> <td class="text-center"> <input type="checkbox" name="canggaran[]" class="checkleng cang2" value="BELANJA LANGSUNG"> </td> <td> <select class="form-control pkts2 akay show_only" name="pkt_pptk[]" style="display: none"> <option value="">-- Pilih PPK --</option> </select> <select class="form-control anggs2 akay show_only" name="angg_pptk[]" style="display: none"> <option value="">-- Pilih PPK --</option> </select> </td> </tr> <tr id="521" data-parent="#52" class="collapse-3-52 collapse in" data-toggle="collapse" data-target=".collapse-4-521" aria-expanded="true" style=""> <td style="width: 150px;">5 . 2 . 1</td> <td>Belanja Pegawai</td> <td>8,652,000</td> <td class="text-center"> <input type="checkbox" name="cpaket[]" class="checkleng cpk3" value="Belanja Pegawai"> <input type="checkbox" name="d_namacpk[]" class="cpk3" value="Belanja Pegawai" style="display: none"> <input type="checkbox" name="d_pagucpk[]" class="cpk3" value="8652000" style="display: none"> </td> <td class="text-center"> <input type="checkbox" name="canggaran[]" class="checkleng cang3" value="Belanja Pegawai"> </td> <td> <select class="form-control pkts3 akay show_only" name="pkt_pptk[]" style="display: none"> <option value="">-- Pilih PPK --</option> </select> <select class="form-control anggs3 akay show_only" name="angg_pptk[]" style="display: none"> <option value="">-- Pilih PPK --</option> </select> </td> </tr> </tbody> </table>