Tengo una aplicación web en HTML5, usando una tabla de arranque. Configuré "data-click-to-select="true" para marcar la casilla de verificación al seleccionar la fila.

Pero al hacer clic en algún cuadro desplegable en esta fila, la casilla de verificación se deselecciona.

¿Cómo evitar el evento de deselección al hacer clic en la fila seleccionada?

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

Yo he tratado:

 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(); });

Pero todo esto no pudo evitar el evento de desmarcación de la casilla de verificación.