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

Question

<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

Answer 1

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>