Note that there are some explanatory texts on larger screens.

plurals
  1. POJavascript validation for checkboxes in JQuery DataTable
    primarykey
    data
    text
    <p>I have a table which is binding with JQuery datatable.</p> <pre><code>&lt;table id="grid1"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Name&lt;/th&gt; &lt;th&gt;View&lt;/th&gt; &lt;th&gt;Modify&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;/table&gt; </code></pre> <p>Below is the javascript code for binding the table/grid-</p> <pre><code>function grid1_LoadData() { grid1.fnDestroy(); grid1.dataTable({ "sScrollY": "200px", "bStateSave": true, 'bDeferRender': true, 'sAjaxSource': '/controller/GetData, 'aoColumns': [ { 'mDataProp': 'Name' }, { 'mDataProp': 'View', "sWidth": "55%", sType: 'bool', bSearchable: false, bSortable: false, mData: 'View', "mRender": function (data, type, full) { return "&lt;input class=\"enabledbool\" name=\"CanView" + full.ID + "\" type=\"checkbox\" " + (data ? " checked=\"true\"" : "") + "/&gt;"; } }, { 'mDataProp': 'Modify', "sWidth": "65%", sType: 'bool', bSearchable: false, bSortable: false, mData: 'Modify', "mRender": function (data, type, full) { // console.log(data); return "&lt;input class=\"enabledbool\" name=\"CanModify" + full.ID + "\" type=\"checkbox\" " + (data ? " checked=\"true\"" : "") + "/&gt;"; } }, ] }); } </code></pre> <p>Before saving the grid/table data, I want to check at least <code>View</code> or <code>Modify</code> check box is checked. I need to write a javascript validation function.</p> <p>This is what I have tried- </p> <pre><code>function Validate() { $(grid1.fnGetData()).each(function () { if ($(.checkbox).is(':checked')) { return true; } else { return false; } }); } </code></pre> <p>Waiting for the valuable suggestions.</p> <p><strong>UPDATES</strong> I ended up using the below javascript function for checking validation -</p> <pre><code>function Validate() { var allOk = true; $(grid1).find("tbody tr").each(function (){ var row = $(this); if (!row.Modify &amp;&amp; !row.View) { allOk = false; } }); return allOk; // Make `Validate` return true only if all rows validate. } </code></pre> <p>What I was trying to do was if <code>Modify</code> and <code>View</code> are not checked then return <code>false</code>. When I checked with <code>$(gridProfiles.fnGetData()).each(function ()</code> instead of <code>$(grid1).find("tbody tr").each(function ()</code>, it was fine. But grid rows are added dynamically, last added rows won't listed when using <code>$(gridProfiles.fnGetData()).each(function ()</code>. Any solution?</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload