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

Navigation
1

Well, I'm doing a virtual product shopping site, and I need my clients to accept the "Term 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 is going wrong, and that only affects the first button ...

link

link

    
asked by anonymous 30.01.2018 / 04:53

1 answer

1

The problem is to use the same id for multiple elements, which is a wrong practice.

  

A id must be unique on a page.

You can use jQuery to capture the buttons by name , as they all have the same (or could be for class if you changed all id by class ): 

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

In order for your code to be better written, I suggest removing all the id of the buttons; or remove the name and change the id to 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><inputname="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>
    
30.01.2018 / 05:04
Header with bg responsive Write the user's Session / Cookie when signing in