Disable Button if checkbox is not checked

Question

I have the below table structure generated from a rest call within it are input checkboxes, before the table is created there a static buttons that I want to disable unless any of the checkboxes are clicked

<div id="divbuttons">
  <button id="Reject" type="button">Reject</button>
  <button id="Approve" type="button">Approve</button>
</div>

<table id="GetItems" cellspacing="12">
  <tbody>
   <tr style="background-color: rgb(204, 204, 204);">
    <td style="width: 349px;"><strong>Select</strong> 
       <input name="chk" type="checkbox" value="35">
    </td>
    <td style="width: 211px;">&nbsp;</td>
    <td style="width: 396px;"><strong>Requester: </strong>Test user</td>
    <td style="width: 149.2px;"><strong>Raised Date:</strong> 29/11/2017</td>
    <td style="width: 806.8px;" colspan="3">&nbsp;</td></tr><tr>
    <td style="width: 349px;"><strong>Item Requested For:<br>:</strong>Desktops</td>
    <td style="width: 211px;"><strong>Bomb<br>&nbsp;</strong>ITSS</td>
    <td style="width: 396px;"><strong>Department:</strong><br>ITSS Infrastructure</td>
    <td style="width: 149.2px;"><strong>Job Title:</strong><br>Consultant</td>
    <td style="width: 376.8px;"><strong>Phone Number:</strong><br>032394</td>
    <td style="width: 213px;"><strong>Request Type</strong><br>:New Allocation</td>
    <td style="width: 217px;"><strong>Replacement Type:<br></strong>New Allocation</td>
   </tr>
  </tbody>
</table>

How can I achieve this using jQuery

Nobita · Accepted Answer · 2017-11-29 01:44:06Z

3

Try this code: JSFiddle

$("input[name='chk']").on("change",function(){
   if(!$(this).is(':checked')) {
     $('#Reject').prop('disabled', true);
     $('#Approve').prop('disabled', true);
   } else {
    $('#Reject').prop('disabled', false);
    $('#Approve').prop('disabled', false);
   }
});

answered Nov 29, 2017 at 1:44

Nobita

3301 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shiladitya · Accepted Answer · 2017-11-29 03:01:19Z

Here you go with a solution

$('#GetItems tbody').html(`<tr style="background-color: rgb(204, 204, 204);">
    <td style="width: 349px;"><strong>Select</strong> 
       <input name="chk" type="checkbox" value="35">
    </td>
    <td style="width: 211px;">&nbsp;</td>
    <td style="width: 396px;"><strong>Requester: </strong>Test user</td>
    <td style="width: 149.2px;"><strong>Raised Date:</strong> 29/11/2017</td>
    <td style="width: 806.8px;" colspan="3">&nbsp;</td></tr><tr>
    <td style="width: 349px;"><strong>Item Requested For:<br>:</strong>Desktops</td>
    <td style="width: 211px;"><strong>Bomb<br>&nbsp;</strong>ITSS</td>
    <td style="width: 396px;"><strong>Department:</strong><br>ITSS Infrastructure</td>
    <td style="width: 149.2px;"><strong>Job Title:</strong><br>Consultant</td>
    <td style="width: 376.8px;"><strong>Phone Number:</strong><br>032394</td>
    <td style="width: 213px;"><strong>Request Type</strong><br>:New Allocation</td>
    <td style="width: 217px;"><strong>Replacement Type:<br></strong>New Allocation</td>
   </tr>`);
   
$('#GetItems').on('change', 'input[name=chk]', function(){
  if($(this).is(':checked')) {
    $('#Reject').removeAttr('disabled');
    $('#Approve').removeAttr('disabled');
  } else {
    $('#Reject').attr('disabled', true);
    $('#Approve').attr('disabled', true);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divbuttons">
  <button id="Reject" type="button" disabled>Reject</button>
  <button id="Approve" type="button" disabled>Approve</button>
</div>

<table id="GetItems" cellspacing="12">
  <tbody>
   
  </tbody>
</table>

I've considered table & tbody is static & row are getting added dynamically.

Since the checkbox is generated dynamically, you need to delegate the change event.

Hope this solution will help you.

Collectives™ on Stack Overflow

Disable Button if checkbox is not checked

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related