Databases
StackOverflow2013
Postsdbo
POprettyCheckable on jqGrid doesn't work
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POprettyCheckable on jqGrid doesn't work
    text
    copied!<p>I have a <em>jqGrid</em> table (that converts a table to grid) with multi-select checkboxes. To customize the checkbox style I used <strong><a href="http://arthurgouveia.com/prettyCheckable/" rel="nofollow noreferrer">prettyCheckable</a></strong>, that generates a label and an anchor (href) and div container for checkbox input (that is hidden and covered by label and a). My issue is that when i check the label doesn't work, instead when i check the input works. <br/><br/> <img src="https://i.stack.imgur.com/13m0P.jpg" alt="Label checked"></p> <p><img src="https://i.stack.imgur.com/sJ8BQ.jpg" alt="Input checked"> </p> <pre><code>&lt;div class="clearfix prettycheckbox labelright blue " id="aui_11140"&gt; &lt;input role="checkbox" id="rs" class="cbx" type="checkbox" style="display: none;"&gt; &lt;label for="rs" class="checked" id="aui_11139"&gt; &lt;/label&gt; &lt;/div&gt; </code></pre> <p>setting prettyCheckable for inputs :</p> <pre><code>$("input[type=checkbox]").change(function() { $(this).triggerHandler("click"); }).prettyCheckable(); </code></pre> <p>And this is my jqGrid settings:</p> <pre><code>$(document).ready(function() { $('#searchForm').ajaxForm(function() { var _data = $('#searchForm').serialize(); $('#ResultsTable').jqGrid().setGridParam({url: '${searchUrl}' + _data}).trigger("reloadGrid") return true; }); jsonTable('ResultsTable', 'ResultsPager', '${searchUrl}', 'searchForm', {id: 'code'}, ['Code', 'Description', 'CF'], [{name: 'code', index: 'code', width: 55}, {name: 'description', index: 'description', width: 90}, {name: 'CF', index: 'CF', width: 80}, function(id) { var selRows = $(this).jqGrid('getGridParam', 'selarrrow'); $('#edit').toggle(selRows.length == 1); $('#delete').toggle(selRows.length &gt; 0); $('#editForm #code').val(selRows); $('#deleteForm #code').val(selRows); }, function(aSel, selected) { $('#edit').toggle(false); $('#delete').toggle(selected); if (selected) { $('#editForm #code').val(selRows); $('#deleteForm #code').val(selRows); } }, true ) }); </code></pre> <p>Why this doesn't work?</p> <p>ps. i have edited the <em>prettyCheckable.js</em> and removed the <code>&lt;a&gt;</code> therefore is not generated. And i renamed the css from <code>.prettycheckbox a {}</code> to <code>.prettycheckbox label {}</code>.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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