1

Bom, estou fazendo um site de compras de produtos virtuais, e preciso que meus clientes aceitem o "Termo de uso". o método que usei foi esse

<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>

Bom a unica coisa que esta dando errado, e que apenas afeta o primeiro button...

http://prntscr.com/i7h5dm

http://prntscr.com/i7h5hh

1 Resposta 1

1

O problema está em usar o mesmo id para vários elementos, o que é uma prática errada.

Um id deve ser único em uma página.

Você pode usar o jQuery para capturar os botões pelo name, já que todos eles possuem o mesmo (ou poderia ser por uma class caso você trocasse todos os id por class):

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

Para que seu código fique melhor escrito, sugiro remova todos os id dos botões; ou então remova os name e troque os id por class:

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

Então, na função, troque o seletor:

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

Exemplo:

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>

12
  • E o input do checkbox tenho que mudar algo nele ?
    – zlDeath
    Commented 30/01/2018 às 13:54
  • @zlDeath Não precisa. Pode deixar como está.
    – Sam
    Commented 30/01/2018 às 13:56
  • @zlDeath Poxa, eu não tenho Skype. Coloquei um exemplo funcional na resposta. Dá uma olhada e me diz.
    – Sam
    Commented 30/01/2018 às 14:17
  • GOD !!! Deu certo, muito obrigado
    – zlDeath
    Commented 30/01/2018 às 14:33
  • Tem como aparecer alguma mensagem avisando que precisa aceitar os termos ?
    – zlDeath
    Commented 30/01/2018 às 14:45

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .