title: how to use toggle button instead of checkbox using jquery UI in jqGrid
body: <p>Code below from other stackoverflow answer is used in jqGrid to implement checkbox using jquery UI in jqGrid top toolbar. This is used to toggle autoedit variable true - false states.</p>
  
  <p>Checkbox caption is too wide for toolbar. How to change checkbox to toolbar button with two states which reflect <code>autoedit</code> true/false values (checked and unchecked states). Instead of check mark similar button should appear in pressed or checked state and in regular/unchecked state if clicked again. 
  Pure checkmark without caption cannot used since there should be some visual glue instead of checkbox rectangle if tolbar contains more than one such checkbox to distinguish them visually.</p>
  
  <pre><code>var autoedit=false;       
  $("#grid_toppager_left table.navtable tbody tr").append(
      '&lt;td&gt;&lt;div&gt;&lt;label&gt;&lt;input class="ui-pg-div" tabindex="-1" type="checkbox" ' +
          (autoedit ? 'checked ' : '') +
          'id="AutoEdit" /&gt;Checbox caption which should appear as top toolbar button tooltip' +
          '&lt;/label&gt;&lt;/div&gt;&lt;/td&gt;');
  $("#AutoEdit").change(function () {
      if ($(this).is(':checked')) {
          autoedit = true;
          $("#AutoEdit").attr("checked", "checked");
      } else {
          autoedit = false;
          $("#AutoEdit").removeAttr("checked");
      }
  });
  </code></pre>