Tooltip when it’s deactivated?

Asked

Viewed 189 times

1

I want to make a tooltip appear when the button is disabled http://prntscr.com/i9tli4 saying that you need to mark the checkbox of terms, as soon as you mark it the tooltip disappeared. Can anyone help me ? Thanks 

    <!--Loja | INICIO-->
    <section class="container"> 
        <div class="presentation"> 
            <h3> loja <span class="hide-on-mobile">Adquira privilégios em nossos servidores</span> </h3> 
        </div> 
        <div class="content"> 
            <div class="row"> 



                <div class="col-md-9"> 
                    <div class="row">
                        <div class="col-md-12">
                            <h4>Servidor: <?php echo $serv_nome_01 ?></h4>

    <input name="ck_permissao"  type="checkbox" id="ck_permissao" value="checkbox" onclick="return confere()" /> Confirmo que li e aceitei todos os 

     <a href="/termos" target="_blank" class="has-tooltip" id="link">
      <span class="tooltip">
        <span><i style="font-size: 14px; color: yellow;" class="material-icons">&#xe001;</i> Leia os Termos e Condições. </span>
      </span>
      Termos e Condições.
    </a>
    <br><br>

                        </div>



                        <div class="col-md-4"> 
                            <div class="product"> 
                                <div class="image"> 
                                    <img src="<?php echo $vip_img_01 ?>" alt="<?php echo $nome_serv ?>" 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="<?php echo $nome_serv ?>" 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="<?php echo $nome_serv ?>" 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="<?php echo $nome_serv ?>" 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="<?php echo $nome_serv ?>" 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="<?php echo $nome_serv ?>" 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="<?php echo $nome_serv ?>" 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="<?php echo $nome_serv ?>" 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="<?php echo $nome_serv ?>" 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="<?php echo $nome_serv ?>" 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="<?php echo $nome_serv ?>" 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="<?php echo $nome_serv ?>" 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> 
                        </div> 
                    </div> 
                </div>
    </section>
    <!--Loja | FIM-->



    <script type="text/javascript">
    function confere() {
       $('.ck_incluir').prop("disabled", !document.getElementById('ck_permissao').checked);
       alert("Você está concordando com todos os Termos e Condições. \n \n    Deseja Continuar ??");
    }
    </script>

Outra Dúvida !!

I have this other page here and also wanted to do the same

• Placing same as that other question. (Put disabled in case the checkbox is not checked)

• And make Tooltip appear if the checkbox is not checked

<!--Loja | INICIO-->
<section class="container"> 
    <div class="presentation"> 
        <h3> loja <span class="hide-on-mobile">Adquira privilégios em nossos servidores</span> </h3> 
    </div> 
    <div class="content"> 
        <div class="row"> 



            <div class="col-md-9"> 
                <div class="row">
                    <div class="col-md-12">
                        <h4>Servidor: <?php echo $serv_nome_01 ?></h4>

<input name="ck_permissao"  type="checkbox" id="ck_permissao" value="checkbox" onclick="return confere()" /> Confirmo que li e aceitei todos os 

 <a href="/termos" target="_blank" class="has-tooltip" id="link">
  <span class="tooltip">
    <span><i style="font-size: 14px; color: yellow;" class="material-icons">&#xe001;</i> Leia os Termos e Condições. </span>
  </span>
  Termos e Condições.
</a>
<br><br>
                    </div>

<section class="container">
 <div class="content"> 
    <div class="carrinho"> 
        <form action="finalizar.php" method="post" class="form-horizontal">
            <div class="body"> 
                <div class="row">

                    <div class="col-md-8"> 
                        <h3>Comprar Pontos</h3> 
                        <hr> 
                        <div class="row"> 
                            <div class="col-md-6"> 
                                <div class="form-group"> 
                                    <label>Pontos</label> 
                                    <input required="required" onpropertychange="TextChange(this)" onkeyup="JavaScript: TextChange()" onmouseup="JavaScript: TextChange()" type="number" id="idquantidade" name="quantidade" value="5" max="1000000" class="ck_incluir form-control"> 
                                </div> 
                            </div> 
                        </div> 
                        <div class="form-group"> 
                            <label>Deseja pagar como?</label> 
                            <div class="row gateways">
                                <div class="col-md-4"> 
                                    <label> 
                                        <input type="radio" name="paypal" id="idpaypal" required> 
                                        <img src="https://i.imgur.com/lqXhSSM.png" class="img-fluid"> 
                                    </label> 
                                </div> 
                                <div class="col-md-4"> 
                                    <label> 
                                        <input type="radio" name="mercadopago" id="idmercadopago" required="required" required> 
                                        <img src="https://i.imgur.com/DT3iO4x.png" class="img-fluid"> 
                                    </label> 
                                </div>
                            </div> 
                        </div> 
                    </div> 
                    <div class="col-md-4"> 
                        <h3>Pagar</h3> 
                        <hr> 
                        <p>Valor Total: 
                            <label class="control-label">R$ <span class="ck_incluir" disabled="disabled" id="valortotal">5,00</span></label>
                        </p> 
                        <br><br> 
                        <button type="submit" name="comprar" value="true" disabled="disabled" class="ck_incluir btn-checkout comprar" role="button" target="_blank" class="ck_incluir btn-checkout" value="FINALIZAR">FINALIZAR</button> 
                    </div>

                </div> 
            </div>
        </form>
    </div> 
 </div> 
</section>

                        </div> 
                    </div> 
                </div> 
            </div>
</section>
<!--Loja | FIM-->
javascript html html5 json

2 answers

2


You can create a tooltip adding by the method .after() jQuery an element after the buttons that will be positioned above it.

First we need to define the styles of tooltip in CSS. You need to add the code below in your CSS:

._tooltip{
   position: absolute;
   display: inline-block;
   height: 30px;
   line-height: 30px;
   padding: 0 6px;
   background-color: rgba(0, 0, 0, .7);
   color: #fff;
   font-size: .8em;
   top: -40px;
   left: 50%;
   white-space: nowrap;
   border-radius: 3px;
   z-index: 999;
   -webkit-transform: translateX(-50%);
   -moz-transform: translateX(-50%);
   -ms-transform: translateX(-50%);
   transform: translateX(-50%);
}

._tooltip::after{
   content: '';
   border-left: 6px solid;
   border-right: 6px solid;
   border-top: 6px solid #000;
   position: absolute;
   top: 100%;
   left: 50%;
   margin-left: -3px;
   opacity: .7;
   filter: alpha(opacity=70);
}

Then the JS code (including changes in function confere()):

function confere(){
   var checado = !document.getElementById('ck_permissao').checked;
   $('.ck_incluir').prop("disabled", checado);
   $("input.ck_incluir")
   .closest(".footer")
   .find("._tooltip")
   .css('display', checado ? 'inline-block' : 'none');
}

$(function(){
   var tooltip_text = 'Leia os Termos e Condições.';
   var tooltip = '<span class="_tooltip">'+tooltip_text+'</span>';
   $("input.ck_incluir")
   .closest("a")
   .eq(0)
   .after(tooltip)
   .parent()
   .css("position","relative");
   // se quiser que apareça em todos os botões
   // basta excluir o .eq(0)
});

See working:

function confere(){
   var checado = !document.getElementById('ck_permissao').checked;
   $('.ck_incluir').prop("disabled", checado);
   $("input.ck_incluir")
   .closest(".footer")
   .find("._tooltip")
   .css('display', checado ? 'inline-block' : 'none');
}

$(function(){
   var tooltip_text = 'Leia os Termos e Condições.';
   var tooltip = '<span class="_tooltip">'+tooltip_text+'</span>';
   $("input.ck_incluir").closest("a").eq(0)
   .after(tooltip)
   .parent()
   .css("position","relative");
   // se quiser que apareça em todos os botões
   // basta excluir o .eq(0)
});
._tooltip{
   position: absolute;
   display: inline-block;
   height: 30px;
   line-height: 30px;
   padding: 0 6px;
   background-color: rgba(0, 0, 0, .7);
   color: #fff;
   font-size: .8em;
   top: -40px;
   left: 50%;
   white-space: nowrap;
   border-radius: 3px;
   z-index: 999;
   -webkit-transform: translateX(-50%);
   -moz-transform: translateX(-50%);
   -ms-transform: translateX(-50%);
   transform: translateX(-50%);
}

._tooltip::after{
   content: '';
   border-left: 6px solid;
   border-right: 6px solid;
   border-top: 6px solid #000;
   position: absolute;
   top: 100%;
   left: 50%;
   margin-left: -3px;
   opacity: .7;
   filter: alpha(opacity=70);
}

/* A LINHA ABAIXO É SÓ PARA EXEMPLO. NÃO USE*/
.ck_incluir{
   width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<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>

  • It worked. However I wanted to put a bigger message. Breaking lines n not fuinciona know pq ?

  • Break the line with <br>

  • take a look at the question again. I made an Edit !

1

here is a function that can help you:

Script(Javascript, no jQuery):

        var button = document.getElementById("teste");
          var checkbox = document.getElementById("termos");
          var div = document.getElementById("logger");

        function Verificar(){

          if(button.disabled == true && checkbox.checked == true){
            button.disabled = false;
            div.innerHTML = "Obrigado!";
          }else{
            button.disabled = true;
            div.innerHTML = "Aceite os termos para liberar o botão!";
          }
        }

        Verificar();

HTML:

        <button id="teste" disabled>Teste</button><br />

        <input type="checkbox" id="termos" onclick="Verificar()"/>  <span id="logger"></span>

Browser other questions tagged javascript html html5 json

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