javascript - 数据切换引导折叠复选框问题

Question

我在使用的代码中遇到了一些与数据切换引导程序有关的问题。

当我想点击复选框时，也会触发数据切换。单击复选框时，有什么方法可以阻止数据切换功能？或任何解决方案

当我想点击复选框时，也会触发数据切换。单击复选框时，有什么方法可以阻止数据切换功能？或任何解决方案

<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>

标签： javascriptjqueryhtmlcsscheckbox

Answer 1

有很多方法可以做到这一点，但这是一种停止传播的简单方法

$('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>