jquery - Jquery 选择 checkbix 并构建要发送到数据库的 url

Question

jsfiddle：http: //jsfiddle.net/Xytvg

每个复选框都有 id 和 value，例如，如果我选中了合格的复选框或不合格的复选框。

我想禁用该复选框取决于单击了哪个复选框，并且我希望在成功回调函数时完成此操作。

下面是我的代码：

$( "input[type=checkbox]" ).on( "click",function( e ){

    var preview = $("#preview").html('');

    // ** just a loader a gif image
    preview .html('<img src="../images/loader.gif" alt="Uploading...."/>');

    // ** this is the value of the checkbox
    var input = $(this).val();

    // ** here i am pulling the id value
    var id    = $(this).attr('id'); 


   $.ajax({
       // here i am trying to build url to be send to the action.php
       // i will get the id and the value depends on which checkbox was clicked 
       // action.php?id=1&value=2

       url: 'action.php?id='+id+'&value='+input, 
       type: "POST",
       success: function( response )
      {
           // here i want to figure out which checkbox was clicked and disabled it
      }
  });

  e.preventDefault();

});



<div id="preview"></div><!--loader gif-->

<p>
   USA
   <input type="checkbox" id="1" value="2" />Qualified OR 
   <input type="checkbox" id="1" value="3" /> Unqualifed
</p>

<p>
   UK 
   <input type="checkbox" id="2" value="2" />Qualified OR 
   <input type="checkbox" id="2" value="3" /> Unqualifed
</p>

<p>
   EGY 
   <input type="checkbox" id="3" value="2" />Qualified OR 
   <input type="checkbox" id="3" value="3" /> Unqualifed
</p>

Answer 1

将复选框分配给单击处理程序中的变量，如下所示：

$( "input[type=checkbox]" ).on( "click",function( e ) {
    var $checkbox = $(this);
    // rest of click handler code

然后在成功回调中，您可以像这样禁用它：

$.ajax({
   url: 'action.php?id='+id+'&value='+input, 
   type: "POST",
   success: function( response )
   {
       $checkbox.attr('disabled', true);
   }
});

Answer 2

干得好：

$( "input[type=checkbox]" ).on( "click",function( e ){
  // You just need to localize the var here :)
  var $this = $(this);
  var preview = $("#preview").html('');

  preview.html('<img src="../images/loader.gif" alt="Uploading...."/>');

  var input = $(this).val();

  var id = $(this).attr('id'); 
  $.ajax({
    url: 'action.php?id='+id+'&value='+input, 
    type: "POST",
    success: function (response) {
      // We added the localized var up above so now it's accessible to this scope :)
      $this.attr("disabled", "disabled");
    }
  });

  e.preventDefault();
});