Can't trigger checkbox inside the modal window

Question

I have webpage where on clicking a button, modal window opens and in that window there is a table containing 3 columns. 1 for links, 2nd for share and 3rd for delete. 2nd and 3rd column only contains checkbox as defined by <td><input style="width:1em;" type="checkbox" id="checkbox"/> </td>.

I wrote a script something like this:

            $("#checkbox").click(function(){
                console.log("Checkbox clicked");
            })

I updated the scripts which now works fine but there is still one problem:

            $(document).on('click', '#checkbox', function () {
                console.log("Checkbox clicked");
                let value = "";
                if ($('#checkbox').is(':checked') == true) {
                    value = $('#checkbox').attr('data-sid');
                    console.log(value);
                }             else if ($('#checkbox').is(':checked') == false) {
                    // value = $('#checkbox').attr('value', 'false1').val();
                    console.log("CAN'T SELECT CHECKBOX");
                }

            })

Below is the modal window:

<div class="modal fade" id="ModalGroupLinks" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content showLink-modal">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Links associated with Group</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body grid-container">
                <div class="row g-0 justify-content-center">
                    <div class="col-sm-6 link-input-here">
                        <input type="text" class="showLink-modal-gp-name" value="">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <table class="show-groupLinks">
                            <thead>
                                <tr class="header">
                                    <th>No.</th>
                                    <th>Links</th>
                                    <th>Share</th>
                                    <th>Delete</th>
                                </tr>
                            </thead>
                            <tbody class="showLink-table"></tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-ftr">
                <button type="submit" class="button-box" id="footer-btn">Save</button>
            </div>
        </div>
    </div>
</div>

Here <tbody> is empty as I am creating its child elements(which contains input field for checkbox) in success:function() through ajax. Many rows are generated and each row has 2 checkboxes. I am now getting the boolean value true or false from only first checkbox that is first row and first checkbox. If I press the other checkboxes, it doesn't gets selected and I get "CANT SELECT THE CHECKBOX" every time from the console. What is happening here?

answer is very simple, but accept / unaccept behavior is strange so i have deleted my answer. — Devsi Odedra, Dec 28 '21 at 04:06

Meet Gondaliya · Answer 1 · 2021-12-28T05:41:31.707

I found out where the problem lies: In the script below

            $(document).on('click', '#checkbox', function () {
                console.log("Checkbox clicked");
                let value = "";
                if ($('#checkbox').is(':checked') == true) {
                    value = $('#checkbox').attr('data-sid');
                    console.log(value);
                }else if ($('#checkbox').is(':checked') == false) {
                    // value = $('#checkbox').attr('value', 'false1').val();
                    console.log("CAN'T SELECT CHECKBOX");
                }

            })

In the if and else if condition $('#checkbox') needs to be replaced by the $(this) so it checks whether the clicked checkbox is checked or not. When using $('#checkbox') it gave the attribute value of the first checkbox only even if you click on the later checkboxes.

New script should look like this:

           $(document).on('click', '#checkbox', function () {
                console.log("Checkbox clicked");
                let value = "";
                if ($(this).is(':checked') == true) {
                    value = $(this).attr('data-sid');
                    console.log(value);
                }else if ($(this).is(':checked') == false) {
                    // value = $(this).attr('value', 'false1').val();
                    console.log("CAN'T SELECT CHECKBOX");
                }

            })

i just shown you to use event delegation model, there is no if else in that code so how you can say there is a problem? — Devsi Odedra, Dec 28 '21 at 05:38
That's not the point. This is an updated question. My original question was solved by your event delegation. — Meet Gondaliya, Dec 28 '21 at 05:40
for your updated question, your answer is still not correct. simple solution. hope you will find it. — Devsi Odedra, Dec 28 '21 at 05:41
Great..! if you having multiple checkbox with same id and not getting any msg in console then its great. — Devsi Odedra, Dec 28 '21 at 05:44

Can't trigger checkbox inside the modal window

1 Answers1