2016-04-28 27 views
0

データテーブルに選択されたチェックボックス行がある場合、ボタンを有効/無効にする方法を教えてください。Datatablesにチェックボックスが選択されている場合にボタンを有効/無効にする方法

var pctoreceive = $('#pcToReceive').DataTable({ 
      'columnDefs': [{ 
       'targets': 0, 
       'searchable': false, 
       'orderable': false, 
       'className': 'dt-body-center', 
       'render': function (data, type, full, meta) { 
        return '<input type="checkbox" name="id[]" value="' 
         + $('<div/>').text(data).html() + '">'; 
       } 
      }], 

私はコードを短縮しました。私はcheckboxのための新しい列を追加したことを示して上記には、選択した行がない場合、これらの2つのボタンは無効にする必要があります

enter image description here

を選択します。そうでない場合は

$('#rc-select-all').on('click', function() { 
    // Check/uncheck all checkboxes in the table 
    var rows = pctoreceive.rows({ 
     'search': 'applied' 
    }).nodes(); 
    $('input[type="checkbox"]', rows).prop('checked', this.checked); 
}); 

// Handle click on checkbox to set state of "Select all" control 
$('#pcToReceive tbody').on('change', 'input[type="checkbox"]', function() { 
    // If checkbox is not checked 
    if (!this.checked) { 
     var el = $('#rc-select-all').get(0); 
     // If "Select all" control is checked and has 'indeterminate' property 
     if (el && el.checked && ('indeterminate' in el)) { 
      // Set visual state of "Select all" control 
      // as 'indeterminate' 
      el.indeterminate = true; 
     } 
    } 
}); 

答えて

1

あなたの問題はdatatableとは関係ありません。

入力チェックの量を格納するカウンタ変数を設定し、ボタンを有効にして> 0にするとカウンタ変数を設定するだけです。

この小さな例(およびfiddle)を参照してください

var counterChecked = 0; 

$('body').on('change', 'input[type="checkbox"]', function() { 

    this.checked ? counterChecked++ : counterChecked--; 
    counterChecked > 0 ? $('#submitButton').prop("disabled", false): $('#submitButton').prop("disabled", true); 

}); 
+0

なぜそれが体の上にいるのですか?なぜ特定のテーブルではないのですか? – qwerzxcxyz

+1

私は私の例ではテーブルを置かなかったので、あなたのコードでは、特定のテーブルセレクターofcを使用する必要があります:) – pumpkinzzz

+0

私はそれを試してみましたが、行にのみ動作しますが、選択/あなたがtbody '$( '#pcToReceive tbody')'でのみイベントを捕捉しているので、ヘッダ – qwerzxcxyz

関連する問題