How to disable and enable Delete button if checkbox is not checked in GridView by Jquery?

Question

I want to disable and enable Delete button if checkbox is not checked in GridView by Jquery? This is my code which doesn't work.

Please help me in a simple way because I am a new developer!

<script type="text/javascript">

                    $(document).ready(function () {

                       $('#<%=GridView1.ClientID %>').find('input[Id*="CheckBox1"]:checkbox').click(function() {
                           if  (this.checked ==true) 
                           {
                               $('[id$="Button2"]').attr('disabled',false);

                           }
                           else
                           {
                               $('[id$="Button2"]').attr('disabled',true);
                           }
                       })
                   });
        </script>

Answer 1

The syntax to check if the checkbox is checked -

<input id="checkbox"  type="checkbox" name="one" value="1" checked="checked">

--

// First method - Recommended
$('#checkbox').prop('checked')  // Boolean true

// Second method - Makes code more readable (e.g. in if statements)
$('#checkbox').is(':checked')  // Boolean true

// Third method - Selecting the checkbox & filtering by :checked selector
$('#checkbox:checked').length  // Integer >0
$('#checkbox:checked').size()  // .size() can be used instead of .length

// Fourth method - Getting DOM object reference
$('#checkbox').get(0).checked  // Boolean true
$('#checkbox')[0].checked      // Boolean true (same as above)

Answer 2

Here is the JavaScript you should use:

$('#<%=GridView1.ClientID %> tr td input[id*="CheckBox1"][type=checkbox]').click(function () {
    var btn = $(this).closest('tr').find('td input[id*="Button2"]');
    if ($(this).prop("checked") === true) {
        btn.attr("disabled", false);
    } else {
        btn.attr("disabled", true);
    }
});

Regards, Uros

Answer 3

Try this

function onCheckBoxChecked(obj) {
  var btn = $(obj).closest('tr').find('input[id*="Button2"]');
  var isChecked = $(obj).attr('checked') ? true : false;
  if (isChecked)
    btn.attr("disabled", false);
 else
    btn.attr("disabled", true);
}

and add onclick event in the gridview checkbox

<asp:CheckBox ID="chkBox" onclick="onCheckBoxChecked(this);" runat="server">
                                </asp:CheckBox>