I have a webapp in HTML5, using bootstrap table. I have set "data-click-to-select="true" to check the checkbox when select the row.

But when click some dropdown to box in this row, the check box become unselected.

How to prevent the unselect event when click the selected row?

<table contenteditable='true' class="table table-bordered table-sm" width="100%" cellspacing="0" style="font-size: 1.0rem;"
                   id="bk-table"

                   data-click-to-select="true"
                  <tr >
 
                    <th data-field="state" data-checkbox="true"></th>
                    <th data-field="courseCode"  data-formatter="renderCourse">Course Code</th>
<th  data-field="book.Distribution_platform" data-formatter="renderMode">Distribution Mode</th>
         ...
                </tr>
                </thead>
</table>
<script>
        function renderMode(value) {
            return `<select style="width: 7em"class ='Distribution_platform' name="Distribution_platform" id="Distribution_platform">
            <option value="" ${(value === '') ? 'selected="selected"' : ""}>--Select--</option>
            <option value="Canvas" ${(value === 'Canvas') ? 'selected="selected"' : ""}>Canvas</option>
            <option value="Main Distribution" ${(value === 'Main Distribution') ? 'selected="selected"' : ""}>Main Distribution</option>
        </select>`
        }

</script>

I have tried：

          function ignoreClickToSelectOn(e) {
    return ['A', 'BUTTON', 'LABEL', 'SELECTION'].indexOf(e.tagName) > -1
  }

  $(function() {
    $('#bk-table').bootstrapTable({
      ignoreClickToSelectOn: ignoreClickToSelectOn
    })
  });

          $('#bk-table').on('click-row.bs.table', function (event, row) 
     {

        event.stopImmediatePropagation();
        event.stopPropagation();
        event.preventDefault();

    });

But these all could not prevent the uncheck event of the checkbox.