如何在数据表中实现复选框和选择选项？

Question

我使用 ajax 调用填充表格。在第一列中，我有用于选择和取消选择行并将数据提交到 php 脚本的复选框。我还有两列带有选择字段。 带有选择的一列（两列中的一列）的渲染函数：

{
  targets: 6,
  render: function(data, type, full, meta) {
  if(data.length == 4) {
  return '<select class="form-control" id="selectotpionmonths' + data[0].cataloguenumber + '"><option value="'+ data[3].months 
              + '">' + data[3].months + '<option value="'+ data[2].months 
              + '">' + data[2].months + '<option value="'+ data[1].months 
              + '">' + data[1].months + '<option value="'+ data[0].months 
              + '">' + data[0].months + '</select>';
            } else {
              return data[0].months;
            }
    }
},

以及点击事件和更改事件的处理程序：

$('#results tbody').on('click', 'input[type="checkbox"]', function(e){
      var $row = $(this).closest('tr');

      // Get row data
      var data = table.row($row).data();

      $('#selectotpionmonths' + data['enc_unit']).change(function(){

        e.preventDefault();

        var selectedoptionformonths = $('#selectotpionmonths' + data['enc_unit']).find("option:selected").text();            

        if(selectedoptionformonths == 3) {

          $('#selectoptionprice' + data['enc_unit']).find('option[value="' + data['price_rrp'][3].price + '"]').prop('selected', true);

        } else if(selectedoptionformonths == 6) {

          $('#selectoptionprice' + data['enc_unit']).find('option[value="' + data['price_rrp'][2].price + '"]').prop('selected', true);

        } else if(selectedoptionformonths == 9) {              

          $('#selectoptionprice' + data['enc_unit']).find('option[value="' + data['price_rrp'][1].price + '"]').prop('selected', true);

        } else if(selectedoptionformonths == 12) {              

         $('#selectoptionprice' + data['enc_unit']).find('option[value="' + data['price_rrp'][0].price + '"]').prop('selected', true);

        }
      });

      if(data['price_numberofmonths'].length == 4) {
        var monthsoption = $('#selectotpionmonths' + data['enc_unit']).find("option:selected").text();           
        var priceoption = $('#selectoptionprice' + data['enc_unit']).find("option:selected").text();        
      } else {
        var monthsoption = data['price_numberofmonths'][0].months;
        var priceoption = data['price_rrp'][0].price;
      }

      // Get row ID
      var dataforserver = {name: data['enc_unit'], duration: monthsoption, price: priceoption};
      var rowId = dataforserver.name;

      // Determine whether row ID is in the list of selected row IDs 
      var index = $.inArray(rowId, rows_selected);

      // If checkbox is checked and row ID is not in list of selected row IDs
      if(this.checked && index === -1){
         rows_selected.push(rowId);
         units_selected.push(dataforserver);
      // Otherwise, if checkbox is not checked and row ID is in list of selected row IDs
      } else if (!this.checked && index !== -1){
         rows_selected.splice(index, 1);
         units_selected.splice(index, 1);
      }

      if(this.checked){
         $row.addClass('selected');
      } else {
         $row.removeClass('selected');
      }

      order_total = 0;
      for(i=0; i < units_selected.length; i++) {
          order_total += parseFloat(units_selected[i].price);
        }
      //console.log(order_total.toFixed(2));
      $( "#ukhoanswer" ).html(

        "Number of units selected: " + units_selected.length + "<br/>" + 
        "Total cost of order: " + order_total.toFixed(2)
      );

      // Update state of "Select all" control
      updateDataTableSelectAllCtrl(table);

      // Prevent click event from propagating to parent
      e.stopPropagation();
   });

   // Handle click on table cells with checkboxes
   $('#results').on('click', 'tbody td, thead th:first-child', function(e){
      $(this).parent().find('input[type="checkbox"]').trigger('click');
   });

   // Handle click on "Select all" control
   $('thead input[name="select_all"]', table.table().container()).on('click', function(e){
      if(this.checked){
         $('#results tbody input[type="checkbox"]:not(:checked)').trigger('click');
      } else {
         $('#results tbody input[type="checkbox"]:checked').trigger('click');
      }

      // Prevent click event from propagating to parent
      e.stopPropagation();
   });

您可以查看复选框here的初始代码

当我单击带有选择字段的单元格时，我想阻止该行上的单击事件。我尝试添加 e.preventDefault 但没有成功。对于带有选择选项的列，我只希望触发更改事件。

有什么想法吗？

Answer 1

我做了以下事情：

      var selectField = $('.form-control');
      selectField.on('click', function(event) {
          event.stopPropagation();
      }); 

选择器用于具有选择选项的单元格。现在，我第一次单击选择字段时，该行被选中。但是下次我选择一个选项时，会阻止单击事件，并且不会选择/取消选择该行。

我正在研究如何防止在第一次单击选择字段时选择行。