How to mark checkbox of the modal with jquery-CodePudding

I am using bootstrap modal and jquery. I am dragging field into form builder and it opens the modal with form below. I want to check id="edit-address" as shown as the modal opens with jquery. I tried a different ways like $('#edit-address').click(); $('#edit-address').prop('checked',true); etc but this is not working. May be i am not able to find the correct selectors.

<div class="modal-dialog modal-lg">
    <div >

        <!-- Modal Header -->
        <div >
            <button type="button"  data-dismiss="modal">×</button>
            <h3  style="text-transform: capitalize;">Heading</h3>
        </div>
        <!-- End Modal Header -->

        <div >
            <div >
                <div >
                    <div >
                        <div  name="form-profile">
                            <div >

                                <div >

                                    <div >
                                        <div >
                                            <label for="edit-address-label" >Name:</label>
                                            <input id="edit-address-label" type="text"  data-option="label" placeholder="The question and name for this field..">
                                        </div>
                                        <div >
                                            <div >
                                                <input id="edit-address-required" type="checkbox" data-option="required" value="1">
                                            </div>
                                        </div>
                                    </div>

                                    <div >

                                        <div >
                                            <div >
                                                <div >
                                                    <input  id="edit-address" type="checkbox" data-option="edit-address" value="1">
                                                    <label for="edit-address" checked="">Mark it</label>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>

CodePudding user response：

The .click() method should work in your case Check the console to see if you have any jquery issues

Here's a very simple example you can try:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Checkbox</title>
</head>

<body>
    <button id="btn">Tick</button>
    <div>
        <input type="checkbox" id="check"> Check
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js""></script>
        <script>
            $('#btn').click(function () {
                $('#check').click();
                console.log(" Checked");
            });</script>
    </body>
</html>

CodePudding user response：

 -try this
 $('#edit-address').attr('checked', true);