Question

    <?php echo CHtml::checkBox('markComplete', FALSE , 
                    array(
                    'class' => 'markComplete',
                    'id'=> 'markComplete'.$events['id'],                        
                    'ajax' => array(
                                    'url'=>$this->createUrl('/events/events/MarkComplete'),
                                    'data'=>'event_status_on='.$events['id'],
                                    'type'=>'POST',
                                    'beforeSend' => 'js:function(){   

                                        var idSelector = $("#markComplete'.$events['id'].'");   
                                        var check = idSelector.is(":checked");  
                                        var child = idSelector.parent("td");
                                        var parent = $(child).parent("TR");
                                        $(parent).css("opacity","0.5");


                                    }',
                                    'success'=>'js:function(resp) {                                                                         
                                        $("#right").prepend(resp);

                                        return true;                                        
                                    }'
                                    ),
                                )

                            );

    ?>

Chtml CheckBox click on checkbox but still marked as unchecked not changing.. if i change it to TRUE then it not change into FALSE… Submit it thrugh AJAX… Getting response perfectly.

Answer 1

There is no error in your code, but the onclick handler that is finally generated for the checkBox returns false by default. Check your generated html, and you’ll see this:

jQuery('body').undelegate('#markComplete_someId','click').delegate('#markComplete_someId','click',function(){jQuery.ajax({'url':'/something','data':'event_status_on=someId','type':'POST','beforeSend':function(){
     var idSelector = $("#markComplete");
     var check = idSelector.is(":checked");
     var child = idSelector.parent("td");
     var parent = $(child).parent("TR");
     $(parent).css("opacity","0.5");
},
'success':function(resp) {
      $("#right").prepend(resp);
      return true;
},'cache':false});
 return false; // this line changes everything!!
});

That return false; in the end prevents the default onclick event behavior of any html element. This is mentioned in the documentation for the clientChange method. You’ll see that it allows us to specify certain special attributes for htmlOptions, such as 'ajax' that you have already used, and also 'return', that specifies what the onclick handler should return, which is false by default, we can change this to return true, by adding the 'return' property like this:

 <?php echo CHtml::checkBox('markComplete', FALSE , 
                array(
                   'class' => 'markComplete',
                   'id'=> 'markComplete'.$events['id'],                        
                   'ajax' => array( /* add your code */ ),
                   'return' => true // add return like this
                )
   );
?>

That will make it work.