1

Quero fazer com que apareça uma tooltip quando o button estiver desativado http://prntscr.com/i9tli4 dizendo que precisa marcar a checkbox de termos, assim que marca-la a tooltip desaparecia. Alguém pode me ajudar ? Agradeço

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

Tenho esta outra pagina aqui e também queria fazer da mesma maneira

• Colocar igual daquela outra pergunta. (Colocar o disabled, caso a checkbox não estiver marcado)

• E fazer com que apareça o Tooltip caso o checkbox não estiver marcado

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

2 Respostas 2

2

Você pode criar um tooltip adicionando pelo método .after() do jQuery um elemento após os botões que será posicionado acima dele.

Primeiro é preciso definir os estilos do tooltip no CSS. É necessário adicionar o código abaixo no seu 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);
}

Em seguida o código JS (inclusive as alterações na função 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)
});

Veja funcionando:

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>

3
  • Deu certo. Porem queria colocar uma mensagem maior. A quebra de linhas \n nao fuinciona sabe pq ?
    – zlDeath
    Commented 4/02/2018 às 17:37
  • Quebre a linha com <br>
    – Sam
    Commented 4/02/2018 às 19:04
  • da uma olhada na pergunta novamente. Fiz um Edit !
    – zlDeath
    Commented 5/02/2018 às 18:09
1

aqui está uma função que pode te ajudar:

Script(Javascript, sem 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>

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 .