How to enable a button, only when you accept the terms

Asked

Viewed 365 times

1

Well, I’m doing a virtual product shopping site, and I need my customers to accept the "Terms of use". The method I used was this

<input name="ck_permissao"  type="checkbox" id="ck_permissao" value="checkbox" onclick="return confere()" /><a>TERMOS DE USO</a>







                <div class="col-md-4"> 
                    <div class="product"> 
                        <div class="image"> 
                            <img src="<?php echo $vip_img_01 ?>" alt="WorldNetwork" class="img-fluid"> 
                        </div> 
                        <div class="name"><?php echo $vip_nome_01 ?> - <?php echo $vip_dias_01 ?></div> 
                        <div class="price"><?php echo $vip_preco_01 ?></div> 
                        <div class="footer"> 
                            <a href="<?php echo $vip_detalhes_01 ?>" target="_blank">
                            <input disabled="disabled" name="ck_incluir" type="button" id="ck_incluir" value="COMPRAR"/>
                            </a>
                        </div> 
                    </div> 
                </div>

                <div class="col-md-4"> 
                    <div class="product"> 
                        <div class="image"> 
                            <img src="<?php echo $vip_img_02 ?>" alt="WorldNetwork" class="img-fluid"> 
                        </div> 
                        <div class="name"><?php echo $vip_nome_02 ?> - <?php echo $vip_dias_02 ?></div> 
                        <div class="price"><?php echo $vip_preco_02 ?></div> 
                        <div class="footer"> 
                            <a href="<?php echo $vip_detalhes_02 ?>" target="_blank">
                            <input disabled="disabled" name="ck_incluir" type="button" id="ck_incluir" value="COMPRAR"/>
                            </a>
                        </div> 
                    </div> 
                </div>

                <div class="col-md-4"> 
                    <div class="product"> 
                        <div class="image"> 
                            <img src="<?php echo $vip_img_03 ?>" alt="WorldNetwork" class="img-fluid"> 
                        </div> 
                        <div class="name"><?php echo $vip_nome_03 ?> - <?php echo $vip_dias_03 ?></div> 
                        <div class="price"><?php echo $vip_preco_03 ?></div> 
                        <div class="footer"> 
                            <a href="<?php echo $vip_detalhes_03 ?>" target="_blank">
                            <input disabled="disabled" name="ck_incluir" type="button" id="ck_incluir" value="COMPRAR"/>
                            </a>
                        </div> 
                    </div> 
                </div>

                <div class="col-md-4"> 
                    <div class="product"> 
                        <div class="image"> 
                            <img src="<?php echo $vip_img_04 ?>" alt="WorldNetwork" class="img-fluid"> 
                        </div> 
                        <div class="name"><?php echo $vip_nome_04 ?> - <?php echo $vip_dias_04 ?></div> 
                        <div class="price"><?php echo $vip_preco_04 ?></div> 
                        <div class="footer"> 
                            <a href="<?php echo $vip_detalhes_04 ?>" target="_blank">
                            <input disabled="disabled" name="ck_incluir" type="button" id="ck_incluir" value="COMPRAR"/>
                            </a>
                        </div> 
                    </div> 
                </div>

                <div class="col-md-4"> 
                    <div class="product"> 
                        <div class="image"> 
                            <img src="<?php echo $vip_img_05 ?>" alt="WorldNetwork" class="img-fluid"> 
                        </div> 
                        <div class="name"><?php echo $vip_nome_05 ?> - <?php echo $vip_dias_05 ?></div> 
                        <div class="price"><?php echo $vip_preco_05 ?></div> 
                        <div class="footer"> 
                            <a href="<?php echo $vip_detalhes_05 ?>" target="_blank">
                            <input disabled="disabled" name="ck_incluir" type="button" id="ck_incluir" value="COMPRAR"/>
                            </a>
                        </div> 
                    </div> 
                </div>

                <div class="col-md-4"> 
                    <div class="product"> 
                        <div class="image"> 
                            <img src="<?php echo $vip_img_06 ?>" alt="WorldNetwork" class="img-fluid"> 
                        </div> 
                        <div class="name"><?php echo $vip_nome_06 ?> - <?php echo $vip_dias_06 ?></div> 
                        <div class="price"><?php echo $vip_preco_06 ?></div> 
                        <div class="footer"> 
                            <a href="<?php echo $vip_detalhes_06 ?>" target="_blank">
                            <input disabled="disabled" name="ck_incluir" type="button" id="ck_incluir" value="COMPRAR"/>
                            </a>
                        </div> 
                    </div> 
                </div>

                <div class="col-md-4"> 
                    <div class="product"> 
                        <div class="image"> 
                            <img src="<?php echo $vip_img_07 ?>" alt="WorldNetwork" class="img-fluid"> 
                        </div> 
                        <div class="name"><?php echo $vip_nome_07 ?> - <?php echo $vip_dias_07 ?></div> 
                        <div class="price"><?php echo $vip_preco_06 ?></div> 
                        <div class="footer"> 
                            <a href="<?php echo $vip_detalhes_07 ?>" target="_blank">
                            <input disabled="disabled" name="ck_incluir" type="button" id="ck_incluir" value="COMPRAR"/>
                            </a>
                        </div> 
                    </div> 
                </div>

                <div class="col-md-4"> 
                    <div class="product"> 
                        <div class="image"> 
                            <img src="<?php echo $vip_img_08 ?>" alt="WorldNetwork" class="img-fluid"> 
                        </div> 
                        <div class="name"><?php echo $vip_nome_08 ?> - <?php echo $vip_dias_08 ?></div> 
                        <div class="price"><?php echo $vip_preco_08 ?></div> 
                        <div class="footer"> 
                            <a href="<?php echo $vip_detalhes_08 ?>" target="_blank">
                            <input disabled="disabled" name="ck_incluir" type="button" id="ck_incluir" value="COMPRAR"/>
                            </a>
                        </div> 
                    </div> 
                </div>

                <div class="col-md-4"> 
                    <div class="product"> 
                        <div class="image"> 
                            <img src="<?php echo $vip_img_09 ?>" alt="WorldNetwork" class="img-fluid"> 
                        </div> 
                        <div class="name"><?php echo $vip_nome_09 ?> - <?php echo $vip_dias_09 ?></div> 
                        <div class="price"><?php echo $vip_preco_09 ?></div> 
                        <div class="footer"> 
                            <a href="<?php echo $vip_detalhes_09 ?>" target="_blank">
                            <input disabled="disabled" name="ck_incluir" type="button" id="ck_incluir" value="COMPRAR"/>
                            </a>
                        </div> 
                    </div> 
                </div>

                <div class="col-md-4"> 
                    <div class="product"> 
                        <div class="image"> 
                            <img src="<?php echo $vip_img_10 ?>" alt="WorldNetwork" class="img-fluid"> 
                        </div> 
                        <div class="name"><?php echo $vip_nome_10 ?> - <?php echo $vip_dias_10 ?></div> 
                        <div class="price"><?php echo $vip_preco_10 ?></div> 
                        <div class="footer"> 
                            <a href="<?php echo $vip_detalhes_10 ?>" target="_blank">
                            <input disabled="disabled" name="ck_incluir" type="button" id="ck_incluir" value="COMPRAR"/>
                            </a>
                        </div> 
                    </div> 
                </div>

                <div class="col-md-4"> 
                    <div class="product"> 
                        <div class="image"> 
                            <img src="<?php echo $vip_img_11 ?>" alt="WorldNetwork" class="img-fluid"> 
                        </div> 
                        <div class="name"><?php echo $vip_nome_11 ?> - <?php echo $vip_dias_11 ?></div> 
                        <div class="price"><?php echo $vip_preco_11 ?></div> 
                        <div class="footer"> 
                            <a href="<?php echo $vip_detalhes_11 ?>" target="_blank">
                            <input disabled="disabled" name="ck_incluir" type="button" id="ck_incluir" value="COMPRAR"/>
                            </a>
                        </div> 
                    </div> 
                </div>

                <div class="col-md-4"> 
                    <div class="product"> 
                        <div class="image"> 
                            <img src="<?php echo $vip_img_12 ?>" alt="WorldNetwork" class="img-fluid"> 
                        </div> 
                        <div class="name"><?php echo $vip_nome_12 ?> - <?php echo $vip_dias_12 ?></div> 
                        <div class="price"><?php echo $vip_preco_12 ?></div> 
                        <div class="footer"> 
                            <a href="<?php echo $vip_detalhes_12 ?>" target="_blank">
                            <input disabled="disabled" name="ck_incluir" type="button" id="ck_incluir" value="COMPRAR"/>
                            </a>
                        </div> 
                    </div> 
                </div>

                <div class="col-md-4"> 
                    <div class="product"> 
                        <div class="image"> 
                            <img src="<?php echo $vip_img_13 ?>" alt="WorldNetwork" class="img-fluid"> 
                        </div> 
                        <div class="name"><?php echo $vip_nome_13 ?> - <?php echo $vip_dias_13 ?></div> 
                        <div class="price"><?php echo $vip_preco_13 ?></div> 
                        <div class="footer"> 
                            <a href="<?php echo $vip_detalhes_13 ?>" target="_blank">
                            <input disabled="disabled" name="ck_incluir" type="button" id="ck_incluir" value="COMPRAR"/>
                            </a>
                        </div> 
                    </div> 
                </div>

                <div class="col-md-4"> 
                    <div class="product"> 
                        <div class="image"> 
                            <img src="<?php echo $vip_img_14 ?>" alt="WorldNetwork" class="img-fluid"> 
                        </div> 
                        <div class="name"><?php echo $vip_nome_14 ?> - <?php echo $vip_dias_14 ?></div> 
                        <div class="price"><?php echo $vip_preco_14 ?></div> 
                        <div class="footer"> 
                            <a href="<?php echo $vip_detalhes_14 ?>" target="_blank">
                            <input disabled="disabled" name="ck_incluir" type="button" id="ck_incluir" value="COMPRAR"/>
                            </a>
                        </div> 
                    </div> 
                </div>

                <div class="col-md-4"> 
                    <div class="product"> 
                        <div class="image"> 
                            <img src="<?php echo $vip_img_15 ?>" alt="WorldNetwork" class="img-fluid"> 
                        </div> 
                        <div class="name"><?php echo $vip_nome_15 ?> - <?php echo $vip_dias_15 ?></div> 
                        <div class="price"><?php echo $vip_preco_15 ?></div> 
                        <div class="footer"> 
                            <a href="<?php echo $vip_detalhes_15 ?>" target="_blank">
                            <input disabled="disabled" name="ck_incluir" type="button" id="ck_incluir" value="COMPRAR"/>
                            </a>
                        </div> 
                    </div> 
                </div>

                <div class="col-md-4"> 
                    <div class="product"> 
                        <div class="image"> 
                            <img src="<?php echo $vip_img_16 ?>" alt="WorldNetwork" class="img-fluid"> 
                        </div> 
                        <div class="name"><?php echo $vip_nome_16 ?> - <?php echo $vip_dias_16 ?></div> 
                        <div class="price"><?php echo $vip_preco_16 ?></div> 
                        <div class="footer"> 
                            <a href="<?php echo $vip_detalhes_16 ?>" target="_blank">
                            <input disabled="disabled" name="ck_incluir" type="button" id="ck_incluir" value="COMPRAR"/>
                            </a>
                        </div> 
                    </div> 
                </div>


<script type="text/javascript">
function confere() {
    document.getElementById('ck_incluir').disabled = ! document.getElementById('ck_permissao').checked;
}
</script>

Well the only thing that’s going wrong, and that just affects the first button...

http://prntscr.com/i7h5dm

http://prntscr.com/i7h5hh

javascript html jquery html5

1 answer

1


The problem is using the same id for various elements, which is a wrong practice.

A id should be unique on a page.

You can use jQuery to capture buttons by name, since they all possess the same (or could be by a class if you change all the id for class):

function confere(){
   $('input[name="ck_incluir"]').prop("disabled", !document.getElementById('ck_permissao').checked);
}

For your code to be better written, I suggest you remove all id or remove the buttons name and change the id for class:

<input disabled="disabled" type="button" class="ck_incluir" value="COMPRAR"/>
                                           ↑

Then, in the function, change the selector:

function confere(){
   $('.ck_incluir').prop("disabled", !document.getElementById('ck_permissao').checked);
}

Example:

function confere() {
   $('.ck_incluir').prop("disabled", !document.getElementById('ck_permissao').checked);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="ck_permissao"  type="checkbox" id="ck_permissao" value="checkbox" onclick="return confere()" /><a>TERMOS DE USO</a>

 <div class="col-md-4"> 
     <div class="product"> 
         <div class="image"> 
             <img src="<?php echo $vip_img_01 ?>" alt="WorldNetwork" class="img-fluid"> 
         </div> 
         <div class="name"><?php echo $vip_nome_01 ?> - <?php echo $vip_dias_01 ?></div> 
         <div class="price"><?php echo $vip_preco_01 ?></div> 
         <div class="footer"> 
             <a href="<?php echo $vip_detalhes_01 ?>" target="_blank">
             <input disabled="disabled" type="button" class="ck_incluir" value="COMPRAR"/>
             </a>
         </div> 
     </div> 
 </div>

 <div class="col-md-4"> 
     <div class="product"> 
         <div class="image"> 
             <img src="<?php echo $vip_img_02 ?>" alt="WorldNetwork" class="img-fluid"> 
         </div> 
         <div class="name"><?php echo $vip_nome_02 ?> - <?php echo $vip_dias_02 ?></div> 
         <div class="price"><?php echo $vip_preco_02 ?></div> 
         <div class="footer"> 
             <a href="<?php echo $vip_detalhes_02 ?>" target="_blank">
             <input disabled="disabled" type="button" class="ck_incluir" value="COMPRAR"/>
             </a>
         </div> 
     </div> 
 </div>

 <div class="col-md-4"> 
     <div class="product"> 
         <div class="image"> 
             <img src="<?php echo $vip_img_03 ?>" alt="WorldNetwork" class="img-fluid"> 
         </div> 
         <div class="name"><?php echo $vip_nome_03 ?> - <?php echo $vip_dias_03 ?></div> 
         <div class="price"><?php echo $vip_preco_03 ?></div> 
         <div class="footer"> 
             <a href="<?php echo $vip_detalhes_03 ?>" target="_blank">
             <input disabled="disabled" type="button" class="ck_incluir" value="COMPRAR"/>
             </a>
         </div> 
     </div> 
 </div>

 <div class="col-md-4"> 
     <div class="product"> 
         <div class="image"> 
             <img src="<?php echo $vip_img_04 ?>" alt="WorldNetwork" class="img-fluid"> 
         </div> 
         <div class="name"><?php echo $vip_nome_04 ?> - <?php echo $vip_dias_04 ?></div> 
         <div class="price"><?php echo $vip_preco_04 ?></div> 
         <div class="footer"> 
             <a href="<?php echo $vip_detalhes_04 ?>" target="_blank">
             <input disabled="disabled" type="button" class="ck_incluir" value="COMPRAR"/>
             </a>
         </div> 
     </div> 
 </div>

 <div class="col-md-4"> 
     <div class="product"> 
         <div class="image"> 
             <img src="<?php echo $vip_img_05 ?>" alt="WorldNetwork" class="img-fluid"> 
         </div> 
         <div class="name"><?php echo $vip_nome_05 ?> - <?php echo $vip_dias_05 ?></div> 
         <div class="price"><?php echo $vip_preco_05 ?></div> 
         <div class="footer"> 
             <a href="<?php echo $vip_detalhes_05 ?>" target="_blank">
             <input disabled="disabled" type="button" class="ck_incluir" value="COMPRAR"/>
             </a>
         </div> 
     </div> 
 </div>

 <div class="col-md-4"> 
     <div class="product"> 
         <div class="image"> 
             <img src="<?php echo $vip_img_06 ?>" alt="WorldNetwork" class="img-fluid"> 
         </div> 
         <div class="name"><?php echo $vip_nome_06 ?> - <?php echo $vip_dias_06 ?></div> 
         <div class="price"><?php echo $vip_preco_06 ?></div> 
         <div class="footer"> 
             <a href="<?php echo $vip_detalhes_06 ?>" target="_blank">
             <input disabled="disabled" type="button" class="ck_incluir" value="COMPRAR"/>
             </a>
         </div> 
     </div> 
 </div>

 <div class="col-md-4"> 
     <div class="product"> 
         <div class="image"> 
             <img src="<?php echo $vip_img_07 ?>" alt="WorldNetwork" class="img-fluid"> 
         </div> 
         <div class="name"><?php echo $vip_nome_07 ?> - <?php echo $vip_dias_07 ?></div> 
         <div class="price"><?php echo $vip_preco_06 ?></div> 
         <div class="footer"> 
             <a href="<?php echo $vip_detalhes_07 ?>" target="_blank">
             <input disabled="disabled" type="button" class="ck_incluir" value="COMPRAR"/>
             </a>
         </div> 
     </div> 
 </div>

 <div class="col-md-4"> 
     <div class="product"> 
         <div class="image"> 
             <img src="<?php echo $vip_img_08 ?>" alt="WorldNetwork" class="img-fluid"> 
         </div> 
         <div class="name"><?php echo $vip_nome_08 ?> - <?php echo $vip_dias_08 ?></div> 
         <div class="price"><?php echo $vip_preco_08 ?></div> 
         <div class="footer"> 
             <a href="<?php echo $vip_detalhes_08 ?>" target="_blank">
             <input disabled="disabled" type="button" class="ck_incluir" value="COMPRAR"/>
             </a>
         </div> 
     </div> 
 </div>

 <div class="col-md-4"> 
     <div class="product"> 
         <div class="image"> 
             <img src="<?php echo $vip_img_09 ?>" alt="WorldNetwork" class="img-fluid"> 
         </div> 
         <div class="name"><?php echo $vip_nome_09 ?> - <?php echo $vip_dias_09 ?></div> 
         <div class="price"><?php echo $vip_preco_09 ?></div> 
         <div class="footer"> 
             <a href="<?php echo $vip_detalhes_09 ?>" target="_blank">
             <input disabled="disabled" type="button" class="ck_incluir" value="COMPRAR"/>
             </a>
         </div> 
     </div> 
 </div>

 <div class="col-md-4"> 
     <div class="product"> 
         <div class="image"> 
             <img src="<?php echo $vip_img_10 ?>" alt="WorldNetwork" class="img-fluid"> 
         </div> 
         <div class="name"><?php echo $vip_nome_10 ?> - <?php echo $vip_dias_10 ?></div> 
         <div class="price"><?php echo $vip_preco_10 ?></div> 
         <div class="footer"> 
             <a href="<?php echo $vip_detalhes_10 ?>" target="_blank">
             <input disabled="disabled" type="button" class="ck_incluir" value="COMPRAR"/>
             </a>
         </div> 
     </div> 
 </div>

 <div class="col-md-4"> 
     <div class="product"> 
         <div class="image"> 
             <img src="<?php echo $vip_img_11 ?>" alt="WorldNetwork" class="img-fluid"> 
         </div> 
         <div class="name"><?php echo $vip_nome_11 ?> - <?php echo $vip_dias_11 ?></div> 
         <div class="price"><?php echo $vip_preco_11 ?></div> 
         <div class="footer"> 
             <a href="<?php echo $vip_detalhes_11 ?>" target="_blank">
             <input disabled="disabled" type="button" class="ck_incluir" value="COMPRAR"/>
             </a>
         </div> 
     </div> 
 </div>

 <div class="col-md-4"> 
     <div class="product"> 
         <div class="image"> 
             <img src="<?php echo $vip_img_12 ?>" alt="WorldNetwork" class="img-fluid"> 
         </div> 
         <div class="name"><?php echo $vip_nome_12 ?> - <?php echo $vip_dias_12 ?></div> 
         <div class="price"><?php echo $vip_preco_12 ?></div> 
         <div class="footer"> 
             <a href="<?php echo $vip_detalhes_12 ?>" target="_blank">
             <input disabled="disabled" type="button" class="ck_incluir" value="COMPRAR"/>
             </a>
         </div> 
     </div> 
 </div>

 <div class="col-md-4"> 
     <div class="product"> 
         <div class="image"> 
             <img src="<?php echo $vip_img_13 ?>" alt="WorldNetwork" class="img-fluid"> 
         </div> 
         <div class="name"><?php echo $vip_nome_13 ?> - <?php echo $vip_dias_13 ?></div> 
         <div class="price"><?php echo $vip_preco_13 ?></div> 
         <div class="footer"> 
             <a href="<?php echo $vip_detalhes_13 ?>" target="_blank">
             <input disabled="disabled" type="button" class="ck_incluir" value="COMPRAR"/>
             </a>
         </div> 
     </div> 
 </div>

 <div class="col-md-4"> 
     <div class="product"> 
         <div class="image"> 
             <img src="<?php echo $vip_img_14 ?>" alt="WorldNetwork" class="img-fluid"> 
         </div> 
         <div class="name"><?php echo $vip_nome_14 ?> - <?php echo $vip_dias_14 ?></div> 
         <div class="price"><?php echo $vip_preco_14 ?></div> 
         <div class="footer"> 
             <a href="<?php echo $vip_detalhes_14 ?>" target="_blank">
             <input disabled="disabled" type="button" class="ck_incluir" value="COMPRAR"/>
             </a>
         </div> 
     </div> 
 </div>

 <div class="col-md-4"> 
     <div class="product"> 
         <div class="image"> 
             <img src="<?php echo $vip_img_15 ?>" alt="WorldNetwork" class="img-fluid"> 
         </div> 
         <div class="name"><?php echo $vip_nome_15 ?> - <?php echo $vip_dias_15 ?></div> 
         <div class="price"><?php echo $vip_preco_15 ?></div> 
         <div class="footer"> 
             <a href="<?php echo $vip_detalhes_15 ?>" target="_blank">
             <input disabled="disabled" type="button" class="ck_incluir" value="COMPRAR"/>
             </a>
         </div> 
     </div> 
 </div>

 <div class="col-md-4"> 
     <div class="product"> 
         <div class="image"> 
             <img src="<?php echo $vip_img_16 ?>" alt="WorldNetwork" class="img-fluid"> 
         </div> 
         <div class="name"><?php echo $vip_nome_16 ?> - <?php echo $vip_dias_16 ?></div> 
         <div class="price"><?php echo $vip_preco_16 ?></div> 
         <div class="footer"> 
             <a href="<?php echo $vip_detalhes_16 ?>" target="_blank">
             <input disabled="disabled" type="button" class="ck_incluir" value="COMPRAR"/>
             </a>
         </div> 
     </div> 
 </div>

  • And the checkbox input I have to change something on it ?

  • @zlDeath No need. You can leave as is.

  • @zlDeath Poxa, I don’t have Skype. I put a functional example in the reply. Take a look and tell me.

  • GOD !!! It worked, thank you very much

  • Is there a message that you need to accept the terms ?

  • @zlDeath How so?

  • Type "To continue You need to access the terms !"

  • @zlDeath You can put this text next to the checkbox, no?

  • Would you have some means of contact for me to explain you better ?

  • I wanted to do like this "https://prnt.sc/i8h7un" Show a message (like a tooltip) when the Buttons are disabled. And when activate the checkbox of the terms the message disappear. ?

  • @zlDeath Sorry for the delay in answering. It has to do that yes, but it would be better to be a subject for another question. Let me give you a hint: ask a specific question, don’t have to explain your entire system, just ask something like this: "How to show a tooltip on disabled buttons before the checkbox is checked?". something like this, and include in the question the example image and the code you already have. So colleagues can help and I’ll try tb. Abs!

  • follow the link https://answall.com/questions/274123/tooltip-whendisabled

Show 7 more comments

Browser other questions tagged javascript html jquery html5

You are not signed in. Login or sign up in order to post.