CODEWITHSUNDEEP
jquerycheckboxdrop-down-menu
elfuego1
elfuego1

Reputation: 10348

JQuery - enable table row dropdown on checkbox checked

I have a table with checkbox and a dropdown in each row. I'd like the dropdown input fields to be disabled on page load BUT became enabled when checkbox for that particular row is checked.

Can you help me with JQuery code which can do that?

<thead>
<tr>
<th>Box</th><th>No</th><th>No 1</th><th>No 2</th><th>No 3</th><th>No 4</th><th>Chosen</th><th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="ID[]" value="341"/></td><td>1</td><td>1</td><td>5</td><td>13</td><td class='key'><select name="chosen_key">
<option value="1" selected="selected">N</option>
<option value="2">Y</option>
<option value="3">M</option>
<option value="4">A</option>
<option value="5">R</option>
</select></td><td>2011-01-28</td></tr>
<tr>
<td><input type="checkbox" name="ID[]" value="342"/></td><td>2</td><td>6</td><td>10</td><td>23</td><td class='key'><select name="chosen_key">
<option value="1">N</option>
<option value="2" selected="selected">Y</option>
<option value="3">M</option>
<option value="4">A</option>
<option value="5">R</option>
</select></td><td>2011-01-28</td></tr>
.
.
.
</tbody>

> Blockquote

Thank you for your help.

Upvotes: 0

Views: 3638

Answers (3)

Rony SP
Rony SP

Reputation: 2628

Use Following jquery for this.

  $(document).ready(function() {
  // Disable select elements
  $('select').each(function() {
     $(this).attr("disabled","disabled");
  });

  // Enable them on click

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

      if($(this).closest("tr").find("td").children("input[type=checkbox]").prop("checked"))
       {           
        $(this).closest("tr").find("td").children("select").removeAttr("disabled");
     }
        else
       {
            $(this).closest("tr").find("td").children("select").attr("disabled","disabled");
       }
   });

});

See this Link For demo: http://jsfiddle.net/nEGTv/15/

Upvotes: 1

hohner
hohner

Reputation: 11588

$(document).ready(function() {
  // Disable select elements
  $('select').each(function() {
     $(this).attr('disabled','true');
  });

  // Enable them on click
  $('input[type=checkbox]').click(function() {
     var s = $(this).parent('td').siblings('td.key').children('select');

     if(s.is(':disabled')) {
        s.removeAttr('disabled');   
     } else {
        s.attr('disabled','true');
     }
  });

});

You don't really need the first part because you can set the initial disabled value in your HTML.

Upvotes: 2

hitesh israni
hitesh israni

Reputation: 1752

look at this fiddle

it uses simple javascript function to toggle the dropdown when u click check box.

Upvotes: 0

Related Questions