CODEWITHSUNDEEP
javascripthtmljquery
Jeff
Jeff

Reputation: 53

How to get next checkbox value if first checkbox is check in jquery?

<script type="text/javascript">
    $(document).ready(function() {
        $('.list-dis input[type="checkbox"]').each(function() {
            if ($(this).closest('tr').index() !== 0) {
                $(this).prop('disabled', true).hide()
                $(this).next().show()
            }
        }).on('change', function() {
            $(this).prop('disabled', true)
            $(this).closest('tr').next('tr').find('input[type="checkbox"]').prop('disabled', false).show()
            .next().hide()
        });
    });
</script>
<table>
    <tr>
        <td>
            <input type="checkbox" class="test" id="16"> value 1
        </td>
        <td>
            <input type="checkbox" class="test" id="17"> value 2
        </td>
        <td>
            <input type="checkbox" class="test" id="18"> value 3
        </td>
        <td>
            <input type="checkbox" class="test" id="19"> value 4
        </td>
        <td>
            <input type="checkbox" class="test" id="20"> value 5
        </td>
    </tr>
</table>

In the above code what happen now all checkbox is disabled instead of first one when I click on first checkbox then next check box will enable and first checkbox is disable which is working fine. Now, What I want when I check first checkbox then it show next checkbox value in alert. So, How can I do this? Please help me.

Thank You

Upvotes: 0

Views: 503

Answers (1)

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

You could add something like this:

var nexttd = $(this).closest('td').next('td');
if (nexttd.length != 0) alert($("input",nexttd).attr("id"))

Demo

$(document).ready(function() {
  $('.list-dis input[type="checkbox"]').each(function() {
    if ($(this).closest('tr').index() !== 0) {
      $(this).prop('disabled', true).hide()
      $(this).next().show();
    }
  }).on('change', function() {
    $(this).prop('disabled', true)
    $(this).closest('tr').next('tr').find('input[type="checkbox"]').prop('disabled', false).show()
      .next().hide();
      
    
      var nexttd = $(this).closest('td').next('td');
      if (nexttd.length != 0) alert($("input",nexttd).attr("id"))
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="list-dis">
  <tr>
    <td>
      <input type="checkbox" class="test" id="16"> value 1
    </td>
    <td>
      <input type="checkbox" class="test" id="17"> value 2
    </td>
    <td>
      <input type="checkbox" class="test" id="18"> value 3
    </td>
    <td>
      <input type="checkbox" class="test" id="19"> value 4
    </td>
    <td>
      <input type="checkbox" class="test" id="20"> value 5
    </td>
  </tr>
</table>

Upvotes: 3

Related Questions