数据切换引导程序崩溃复选框的问题

时间：2019-12-16 07:47:34

标签： javascript jquery html css checkbox

我正在使用的代码中的数据触发引导程序存在一些问题。

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

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

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

1 个答案:

答案 0 :(得分：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>

相关问题
最新问题