選中復選框時刪除鏈接

Question

我有一個帶有Datatable插件的表，當用戶單擊行（ tr ）時，我將執行該操作，他將被重定向到該鏈接。 但我不希望用戶單擊該行上的復選框時將其重定向到該鏈接。 這是html：

 <tr class="odd gradeX">
   <td class="number_elem_lang">
      <label class='with-square-checkbox2-mylist-details'>
      <input type='checkbox'>
      <span></span>
      </label>
   </td>
   <td class=""> ID022ox</td>
   <td class="list-name">First Lipsum List</td>
   <td class=""> 22 Candidates</td>
   <td class="">01 Apr 2016</td>
   <td><a href=""></a></td>
</tr>

這是我的JavaScript代碼，用於在用戶單擊鏈接時將其重定向到該鏈接：

$('#sample_1').on( 'click', 'tr', function() {
  var $a = $(this).find('a').last();
  if ( $a.length )
     window.location = $a.attr('href');
  } );

所以我不想在單擊復選框時重定向用戶，請幫助:)

謝謝

Answer 1

您可以使用e.target來檢查用戶單擊了哪些元素。 在下面的示例中，我們檢查用戶是否單擊了類型為checkbox的input 。 然后，我們不運行其余功能。

 $('table').on( 'click', 'tr', function(e) { var target = $(e.target); debugger; // For debugging purposes. if (target.is('input[type=checkbox]')) { // Do not continue if it's an input console.log('no redirect'); return true; } console.log('do redirect'); var $a = $(this).find('a').last(); if ( $a.length ) window.location = $a.attr('href'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr class="odd gradeX"> <td class="number_elem_lang"> <label class='with-square-checkbox2-mylist-details'> <input type='checkbox'> <span></span> </label> </td> <td class=""> ID022ox</td> <td class="list-name">First Lipsum List</td> <td class=""> 22 Candidates</td> <td class="">01 Apr 2016</td> <td><a href=""></a></td> </tr> </table> 

更新：

在此特定情況下，復選框具有一些自定義樣式，從而導致e.target為span 。 解決方案是將條件更改為$(e.target).is('span') ，甚至更好地在span上設置一個類並使用$(e.target).hasClass('my-custom-checkbox') 。

Answer 2

您可以在此處-添加此內容以在單擊復選框時取消事件：

 $("tr input:checkbox").click(function(event) {
     event.stopPropagation();
     // Do something
 });

這是一個正在工作的演示

 $('table').on('click', 'tr', function() { var $a = $(this).find('a').last(); if ($a.length) alert("fsfsd"); }); $("tr input:checkbox").click(function(event) { event.stopPropagation(); // Do something }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr class="odd gradeX"> <td class="number_elem_lang"> <label class='with-square-checkbox2-mylist-details'> <input type='checkbox'> <span></span> </label> </td> <td class="">ID022ox</td> <td class="list-name">First Lipsum List</td> <td class="">22 Candidates</td> <td class="">01 Apr 2016</td> <td> <a href=""></a> </td> </tr> </table> 

Answer 3

使用if構造

if ($('input.checkbox_check').is(':checked')) {
...
}

Answer 4

 Add a class named yourradio in your radio button and add this javascript 
<label class='with-square-checkbox2-mylist-details'>
      <input type='checkbox' class="yourradio">
      <span></span>
      </label> 
<script>
$('.yourradio').on('click', function(){
 return false;
});