如何實現數據表中的複選框並選擇選項？

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行選擇該行。但是下次我選擇一個選項時，單擊事件被阻止，並且該行未被選中/取消選擇。

我正在尋找如何防止在第一次點擊選擇字段時選中的行。