title: jqGrid - checkbox editing not able to edit selected row
body: <p>In my jqGrid, I have a checkbox which is also available for editing, i.e. a user can click on the checkbox and that checkbox's value will be updated in the database. That is working fine. However when I click on the checkbox and if I try clicking on it again, <em>nothing happens</em>. The row does not get saved. Theoretically the unchecked value of the checkbox should be saved. But this does not happen. </p>
  
  <p>I have tried referring to <a href="https://stackoverflow.com/a/7210627/">this</a> answer of Oleg but it does not help. </p>
  
  <p>The weird problem is if I select another row and then try to unselect the checkbox again, I do see a save request going.  </p>
  
  <p>I am guessing this is because I am trying to edit a row which is currently selected. But I am not sure what I am doing wrong here.</p>
  
  <p>This is what I am doing in my <code>beforeSelectRow</code></p>
  
  <pre><code>beforeSelectRow: function (rowid, e) {
      var $target = $(e.target),
          $td = $target.closest("td"),
          iCol = $.jgrid.getCellIndex($td[0]),
          colModel = $(this).jqGrid("getGridParam", "colModel");
      if (iCol &gt;= 0 &amp;&amp; $target.is(":checkbox")) {
          if (colModel[iCol].name == "W3LabelSelected") {
              console.log(colModel[iCol].name);
              $(this).setSelection(rowid, true);
              $(this).jqGrid('resetSelection');
              $(this).jqGrid('saveRow', rowid, {
                  succesfunc: function (response) {
                      $grid.trigger('reloadGrid');
                      return true;
                  }
              });
          }
      }
      return true;
  },
  </code></pre>
  
  <p><strong>Configuration:</strong> </p>
  
  <p>jqGrid version: Latest free jqGrid</p>
  
  <p>Data Type: Json being saved to server</p>
  
  <p><strong>Minimal Grid Code</strong>: <a href="http://jsfiddle.net/OlegKi/HJema/168/" rel="nofollow noreferrer">jsFiddle</a></p>
  
  <p><strong>EDIT:</strong> After Oleg's answer this is what I have so far:</p>
  
  <pre><code>beforeSelectRow: function (rowid, e) {
      var $self = $(this),
          iCol = $.jgrid.getCellIndex($(e.target).closest("td")[0]),
          cm = $self.jqGrid("getGridParam", "colModel");
      if (cm[iCol].name === "W3LabelSelected") {
          //console.log($(e.target).is(":checked"));
          $(this).jqGrid('saveRow', rowid, {
              succesfunc: function (response) {
                  $grid.trigger('reloadGrid');
                  return true;
              }
          });
      }
  
      return true; // allow selection
  }
  </code></pre>
  
  <p>This is close to what I want. However if I select on the checkbox the first time and the second time, the <code>console.log</code> does get called everytime. However the <code>saveRow</code> gets called only when I check the checkbox and then click on it again to uncheck it the first time and never after that. By default the checkbox can be checked or unchecked based on data sent from server.</p>
  
  <p><a href="https://i.stack.imgur.com/TZXRK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TZXRK.png" alt="enter image description here"></a></p>
  
  <p>In the image, the request is sent after selecting the checkbox two times instead of being sent everytime.</p>
  
  <p><strong>UPDATE:</strong> As per @Oleg's suggestion, I have implemented <code>cellattr</code> and called a function inside. In the function I simply pass the rowid and update the checkbox of that rowid on the server. </p>
  
  <p>Here's the code I used:</p>
  
  <pre><code>{
      name: 'W3LabelSelected',
      index: 'u.W3LabelSelected',
      align: 'center',
      width: '170',
      editable: false,
      edittype: 'checkbox',
      formatter: "checkbox",
      search: false,
      formatoptions: {
          disabled: false
      },
      editoptions: {
          value: "1:0"
      },
      cellattr: function (rowId, tv, rawObject, cm, rdata) {
          return ' onClick="selectThis(' + rowId + ')"';
      }
  },
  </code></pre>
  
  <p>and my selectThis function:</p>
  
  <pre><code>function selectThis(rowid) {
      $.ajax({
          type: 'POST',
          url: myurl,
          data: {
              'id': rowid
          },
          success: function (data) {
              if (data.success == 'success') {
                  $("#list").setGridParam({
                      datatype: 'json',
                      page: 1
                  }).trigger('reloadGrid');
              } else {
                  $("&lt;div title='Error' class = 'ui-state-error ui-corner-all'&gt;" + data.success + "&lt;/div&gt;").dialog({});
              }
          }
      });
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/HJema/183/" rel="nofollow noreferrer">FIDDLE</a></p>