Disable checkbox for each row in numbered list

Question

I am running python with flask to render an html page. I have this html using JQuery: https://pastebin.com/SR66uc5J

<!DOCTYPE html>
<html>

<head>
    <script type="text/javascript" src="{{ url_for('static', filename='js/jquery164.js') }}"></script>

</head>
<body>
    <h1>Hello! You are here, {{ email }} </h1>
    <button><a href={{ '/protected_area' }}>Go Back</a></button>
        <form id="form" action="{{ url_for("admin")}}" method="POST">
            <ol>
                {% for entry in allderos %}
          
                    <li>
                        <p>
                            entry0 {{ entry[0] }} , entry1 {{ entry[1] }} , entry2 {{ entry[2] }} ,
                            entry3 {{ entry[3] }} , entry4 {{ entry[4] }} , entry5 {{ entry[5] }} ,
                            entry6 {{ entry[6] }} , entry7 {{ entry[7] }} , entry8 {{ entry[8] }} ,
                            entry9 {{ entry[9] }} , entry10 {{ entry[10] }} ,entry11 {{ entry[11] }} ,
                            entry12 {{ entry[12] }}, entry 13 {{ entry[13] }}
                  
                        <input type="text" name="hello" />
                    
                    </p>
                    <p>
                        <input id="approvedCheck" type="checkbox" value={{ entry[13] }}  name="approved"/>APPROVE
                    </p>

                    <p>
                        <input id="deniedCheck" type="checkbox" value={{ entry[13] }}  name="denied"/>DENY
                    </p>
                </li>
                {% endfor %}
            </ol>
            <button type="submit" >Submit</button>
        </form>

        <script type="text/javascript">
            $('#approvedCheck').change(function () {
                if ($(this).attr("checked")) {
                    $('#deniedCheck').attr('disabled', true);
                } else {
                    $('#deniedCheck').attr('disabled', false);
                }
            });
    

            $('#deniedCheck').change(function () {
                if ($(this).attr("checked")) {
                    $('#approvedCheck').attr('disabled', true);
                } else {
                    $('#approvedCheck').attr('disabled', false);
                }
            });
        </script>
    

</body>
</html>

I have N rows with 13 items each row. For each row, it shows an input text box and 2xinput checkbox

When i check one of the boxes, it disables the other.

The thing is that it works only for the first row, the java script does not work for the rest of the rows.

I feel like i am missing something, that something more should be added, but i cannot figure it out.

Can you help, please? Thank you

score 1 · Answer 1 · answered Apr 08 '22 at 13:36

Add a class to checkbox u need to manupulate or better you can cycle on all checkbox

    <!DOCTYPE html>
<html>

<head>
    <script type="text/javascript" src="{{ url_for('static', filename='js/jquery164.js') }}"></script>

</head>
<body>
    <h1>Hello! You are here, {{ email }} </h1>
    <button><a href={{ '/protected_area' }}>Go Back</a></button>
        <form id="form" action="{{ url_for("admin")}}" method="POST">
            <ol>
                {% for entry in allderos %}
          
                    <li>
                        <p>
                            entry0 {{ entry[0] }} , entry1 {{ entry[1] }} , entry2 {{ entry[2] }} ,
                            entry3 {{ entry[3] }} , entry4 {{ entry[4] }} , entry5 {{ entry[5] }} ,
                            entry6 {{ entry[6] }} , entry7 {{ entry[7] }} , entry8 {{ entry[8] }} ,
                            entry9 {{ entry[9] }} , entry10 {{ entry[10] }} ,entry11 {{ entry[11] }} ,
                            entry12 {{ entry[12] }}, entry 13 {{ entry[13] }}
                  
                        <input type="text" name="hello" />
                    
                    </p>
                    <p>
                        <input id="approvedCheck" type="checkbox" value={{ entry[13] }}  name="approved" class="approvedCheck"/>APPROVE
                    </p>

                    <p>
                        <input id="deniedCheck" type="checkbox" value={{ entry[13] }}  name="denied" class="deniedCheck"/>DENY
                    </p>
            </li>
            {% endfor %}
        </ol>
        <button type="submit" >Submit</button>
    </form>

    <script type="text/javascript">
        $('#approvedCheck').change(function () {
            if ($(this).attr("checked")) {
                $('.deniedCheck').attr('disabled', true);
            } else {
                $('.deniedCheck').attr('disabled', false);
            }
        });


        $('#deniedCheck').change(function () {
            if ($(this).attr("checked")) {
                $('.approvedCheck').attr('disabled', true);
            } else {
                $('.approvedCheck').attr('disabled', false);
            }
        });
    </script>

score 0 · Accepted Answer · answered Apr 08 '22 at 19:19

I got it working.

Because i am using JINJA, i had to think in JINJA :)

I added a jinja variable in the jinja for loop

I had to add the JavaScript function inside the {% for entry in allderos %} to be validated by the jinja for loop.

<!DOCTYPE html>
<html>

<head>

</head>

<body>
    <h1>Hello! You are here, {{ email }} </h1>
    <button><a href={{ '/protected_area' }}>Go Back</a></button>


        <form id="form" action="{{ url_for("admin")}}" method="POST">
            <ol>
                {% for entry in allderos %}
          
                    <li>
                        <p>
                            entry0 {{ entry[0] }} , entry1 {{ entry[1] }} , entry2 {{ entry[2] }} ,
                            entry3 {{ entry[3] }} , entry4 {{ entry[4] }} , entry5 {{ entry[5] }} ,
                            entry6 {{ entry[6] }} , entry7 {{ entry[7] }} , entry8 {{ entry[8] }} ,
                            entry9 {{ entry[9] }} , entry10 {{ entry[10] }} ,entry11 {{ entry[11] }} ,
                            entry12 {{ entry[12] }}, entry 13 {{ entry[13] }}
                  
                        <input type="text" name="hello" />
                    
                    </p>
                    <p>
                        <input id="{{ entry[13] }}approved" onclick="  if (document.getElementById('{{ entry[13] }}approved').checked)
                        {
                      document.getElementById('{{ entry[13] }}denied').disabled = true;
                        }
                        else {
                         document.getElementById('{{ entry[13] }}denied').disabled = false;
                        }" type="checkbox" value={{ entry[13] }}  name="approved"/>APPROVE
                    </p>

                    <p>
                        <input id="{{ entry[13] }}denied" onclick="if (document.getElementById('{{ entry[13] }}denied').checked)
                        {
                         document.getElementById('{{ entry[13] }}approved').disabled = true;
                      }
                      else {
                          document.getElementById('{{ entry[13] }}approved').disabled = false;
                      }" type="checkbox" value={{ entry[13] }}  name="denied"/>DENY
                    </p>
                </li>
               

                {% endfor %}
            </ol>

            <button type="submit" >Submit</button>
        </form>

</body>

</html>

Disable checkbox for each row in numbered list

2 Answers2