CODEWITHSUNDEEP
jquerycheckbox
Kaur
Kaur

Reputation: 501

Jquery enable/disable checkbox by name

I am trying to disable checkboxes by name in the following table, but it is not working. Any suggestions, why?

<table border="1" class="myTable grid">
  <tr align="center">
    <td>A</td>
  </tr>
  <tr align="center">
    <td>1</td>
    <td>
      <input type="checkbox" name="cb1;1" value="1">
    </td>
  </tr>
  <td>2</td>
  <td>
    <input type="checkbox" name="cb2;1" value="1" checked>
  </td>
  </tr>
  <tr align="center">
</table>
<button id="button1" type="button"> DISABLE </button>
<button id="button2" type="button">ENABLE </button>

This is how I am disable/enable these checkboxes. I have tried .attr('disabled', 'disabled'); for disabling too.

$("#button1").click(function() { 
  var cbname = $j(this).attr("name");
  $("input[name='cbname']").prop("disabled", false);
});

$("#button2").click(function() { 
  var cbname = $j(this).attr("name");
  $("input[name='cbname']").prop("disabled", true);
});

Upvotes: 0

Views: 6530

Answers (2)

Grant Mooney
Grant Mooney

Reputation: 390

A few things:

  1. You have not assigned a "name" attribute to your buttons, so it is not finding the associated checkbox.

  2. You are not escaping the cbname variable in your checkbox selector.

All together this should look like this:

HTML:

    <table border="1" class="myTable grid">
      <tr align="center">
        <td>A</td>
      </tr>
      <tr align="center">
        <td>1</td>
        <td>
          <input type="checkbox" name="cb1;1" value="1">
        </td>
      </tr>
      <tr>
        <td>2</td>
        <td>
          <input type="checkbox" name="cb2;1" value="1" checked>
        </td>
      </tr>
      <tr align="center">
    </table>
    <button id="disable" type="button" name="cb1;1"> DISABLE </button>
    <button id="enable" type="button" name="cb1;1">ENABLE </button>

Javascript:

   $("#disable").click(function() { 
      var cbname = $(this).attr("name");
      $('input[name="'+cbname+'"]').prop("disabled", true);
    });

    $("#enable").click(function() { 
      var cbname = $(this).attr("name");
      $('input[name="'+cbname+'"]').prop("disabled", false);
    });

JSFiddle: https://jsfiddle.net/x324436z/

P.S.: I took the liberty of naming your enable and disable button ids appropriately.

Upvotes: 1

Vad
Vad

Reputation: 4099

Rour checkbox names are cb1;1 and cb2;1, but you are trying to select cbname, try changing it to:

$("input[name='cb1;1']").prop("disabled", false);

Upvotes: 0

Related Questions