如何实现数据表中的复选框并选择选项？

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，但没有成功。对于具有select选项的列，我只希望触发change事件。

任何想法？

Answer 1

我做了以下内容：

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

的选择是与选择的选项的单元格。现在我第一次点击select行选择该行。但是下次我选择一个选项时，单击事件被阻止，并且该行未被选中/取消选择。

我正在寻找如何防止在第一次点击选择字段时选中的行。