Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

lucasdidur

[Resolvido] Fazer uma Função que desabilite os input

Por , em Javascript

Recommended Posts

lucasdidur    0

lucasdidur
Postado

Olá pessoal, já procurei por toda parte e não achei e também não sei como fazer alguém pode me ajudar a Criar uma Função para desativar usando um checkbox?

 

 

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <form id="toggleForm">
    <input type="checkbox" id="toggle" name="toggle" />
        <ul>
          <li id="link_nome">
            <label> 
              <strong>0.</strong> Nome Jogo<br />
                <input name="jogo_n_or_lk[]" id="nome_jogo" type="text" class="text link_nome"/>
                <em><strong>Exemplo:</strong> Digite o nome do jogo</em> 
            </label>
          </li>
          
          <li id="link_link" >
            <label>  
              <strong>1.</strong> Coloque o Site do <a href="http://www.baixakijogos.com.br/">Baixaki Jogos</a><br />
              <input name="jogo_n_or_lk[]" type="text" class="text link_link" disabled />
            </label>
            <br />
            <label>
             <strong>2.</strong> Coloque o Site do <a href="http://www.gamevicio.com.br/">GameVicio</a> - Jogo<br />
              <input name="jogo_n_or_lk[]" type="text" class="text link_link" disabled/>
            </label>
            <br />
            <label>ERSB<br />
               <input name="jogo_n_or_lk[]" type="text" class="text link_link" disabled/>
            </label>
            <br />
            <label>Requisitos<br />
               <input name="jogo_n_or_lk[]" type="text" class="text link_link" disabled/>
            </label>
          </li>
        </ul>
   </form>
</body>
</html>​

É Assim, tem um li com o id='link_nome' e id='link_link' quando usar o checkbox faça com o que o estiver dentro do 'link_link' fique desativado e oculto e quando clicar de novo no checkbox faça o mesmo com o 'link_nome' e desfaça o que fez no outro. Tipo Ativa um ou Ativa o outro.

 

Já tentei fazer sozinho mais não funciona nd, tentei também com o JQuery e nd também. podem me ajudar?

Compartilhar este post

Link para o post
Compartilhar em outros sites

lucasdidur    0

lucasdidur
Postado

Desculpe não entendi direito. O que vce quer que aconteça? e quando o que for apertado?

 

Tem um li com o id link_nome, que ficara aparecendo por padrão, o que eu quero que aconteça é que quando for checkado o checkbox que ele desative o que tem no li e ative o que tem no outro li.

Assim

 

No Inicio

 

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <form id="toggleForm">
    <input type="checkbox" id="toggle" name="toggle" />
        <ul>
          <li id="link_nome">
            <label> 
              <strong>0.</strong> Nome Jogo<br />
                <input name="jogo_n_or_lk[]" id="nome_jogo" type="text" class="text link_nome"/>
                <em><strong>Exemplo:</strong> Digite o nome do jogo</em> 
            </label>
          </li>
          
          <li id="link_link" style='display:none'>
            <label>  
              <strong>1.</strong> Coloque o Site do <a href="http://www.baixakijogos.com.br/">Baixaki Jogos</a><br />
              <input name="jogo_n_or_lk[]" type="text" class="text link_link" disabled />
            </label>
            <br />
            <label>
             <strong>2.</strong> Coloque o Site do <a href="http://www.gamevicio.com.br/">GameVicio</a> - Jogo<br />
              <input name="jogo_n_or_lk[]" type="text" class="text link_link" disabled/>
            </label>
            <br />
            <label>ERSB<br />
               <input name="jogo_n_or_lk[]" type="text" class="text link_link" disabled/>
            </label>
            <br />
            <label>Requisitos<br />
               <input name="jogo_n_or_lk[]" type="text" class="text link_link" disabled/>
            </label>
          </li>
        </ul>
   </form>
</body>
</html>​

Quando clicar no checkbox ele muda assim

 

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <form id="toggleForm">
    <input type="checkbox" id="toggle" name="toggle" />
        <ul>
          <li id="link_nome" style='display:none'>
            <label> 
              <strong>0.</strong> Nome Jogo<br />
                <input name="jogo_n_or_lk[]" id="nome_jogo" type="text" class="text link_nome" disabled/>
                <em><strong>Exemplo:</strong> Digite o nome do jogo</em> 
            </label>
          </li>
          
          <li id="link_link" >
            <label>  
              <strong>1.</strong> Coloque o Site do <a href="http://www.baixakijogos.com.br/">Baixaki Jogos</a><br />
              <input name="jogo_n_or_lk[]" type="text" class="text link_link"  />
            </label>
            <br />
            <label>
             <strong>2.</strong> Coloque o Site do <a href="http://www.gamevicio.com.br/">GameVicio</a> - Jogo<br />
              <input name="jogo_n_or_lk[]" type="text" class="text link_link" />
            </label>
            <br />
            <label>ERSB<br />
               <input name="jogo_n_or_lk[]" type="text" class="text link_link" />
            </label>
            <br />
            <label>Requisitos<br />
               <input name="jogo_n_or_lk[]" type="text" class="text link_link" />
            </label>
          </li>
        </ul>
   </form>
</body>
</html>​

Ele Ativa os input do 2º li e torna visível, e o input do 1º li fica desativado e oculto. Quando for Pressionado o checkbox de novo ele faz o inverso do que fez, tipo um reset.

 

Entendeu agora?

Compartilhar este post

Link para o post
Compartilhar em outros sites

augustoclaro    2

augustoclaro
Postado

Entendi..

 

Use assim:

$(document).ready(function(){
  $("#gerar_link").click(function(){
    ch = this.checked;
    if (!ch) {
    $('.link_nome').removeAttr('disabled');
    $('.link_link').attr('disabled', true);
    $('.url_name').css('display', '');
    $('.url_link').css('display', 'none');
    }else{
    $('.link_nome').attr('disabled', true);
    $('.link_link').removeAttr('disabled');
    $('.url_name').css('display', 'none');
    $('.url_link').css('display', '');
    }
  });
});
e tire o onChange do checkbox.

Compartilhar este post

Link para o post
Compartilhar em outros sites

lucasdidur    0

lucasdidur
Postado

Olá, eu de novo, quando fui passar para a página. Ele parou de funcionar. O que será que esta acontecendo?

 

Aqui vai a pagina inteira.

 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Gerar Conteudo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>
jQuery(document).ready(function(){
    jQuery("#gerar_link").click(function(){
        ch = this.checked;
        if (!ch) {
            jQuery('.link_nome').removeAttr('disabled');
            jQuery('.link_link').attr('disabled', true);
            jQuery('.url_name').css('display', '');
            jQuery('.url_link').css('display', 'none');
        }else{
            jQuery('.link_nome').attr('disabled', true);
            jQuery('.link_link').removeAttr('disabled');
            jQuery('.url_name').css('display', 'none');
            jQuery('.url_link').css('display', '');
        }
    });
});​
</script>
</head>

<body>
    <form  method="POST" >
        <div id="wizard">
            <div class="items">
                <!-- page1 -->
                <div class="page">
                    <h2>
                        <strong>Passo 1: </strong> Links de Sites do jogo 
                        <em>Por favor, entre com os link das páginas referente ao jogo</em>
                    </h2>
                    <ul>
                        <input name="gerar_link" type="checkbox" id="gerar_link" />
                        <li class="url_name">
                            <label> 
                                <strong>0.</strong> Nome Jogo<br />
                                <input name="jogo_n_or_lk" id="nome_jogo" type="text" class="text link_nome"/>
                            </label>
                        </li>
                        <br />
                        <li class="url_link" style='display:none'>
                            <label>  
                                <strong>1.</strong> Site do <a href="http://www.baixakijogos.com.br/">Baixaki Jogos</a><br />
                                <input name="jogo_n_or_lk[]" type="text" class="text link_link" disabled />
                            </label>
                            <br />
                            <label>
                                <strong>2.</strong> Site do <a href="http://www.gamevicio.com.br/">GameVicio</a> - Jogo<br />
                                <input name="jogo_n_or_lk[]" type="text" class="text link_link" disabled/>
                            </label>
                            <br />
                            <label>ERSB<br />
                                <input name="jogo_n_or_lk[]" type="text" class="text link_link" disabled/>
                            </label>
                            <br />
                            <label>Requisitos<br />
                                <input name="jogo_n_or_lk[]" type="text" class="text link_link" disabled/>
                            </label>
                        </li>
                    </ul>
                </div>
                <!-- page2 -->
                <div class="page">
                    <h2>
                        <strong>Passo 2: </strong>Dados do Jogo<b></b>
                        <em>Por favor, coloque as informações referente ao jogo:</em>
                    </h2>
                                    
                    <ul>
                        <li class="required double">
                            <label> 
                                <strong>1.</strong>Selecione a plataforma do jogo <span>*</span>
                                <select name="plataforma" class="text"> 
                                    <option value="">-- Por Favor Selecione --</option> 
                                    <option value="PC">Computador</option>
                                    <option value="X-BOX 360">X-BOX 360</option>
                                    <option value="PS 3">PlayStation 3</option>
                                    <option value="PS 2">PlayStation 2</option>
                                    <option value="Nintendo Wii">Nintendo Wii</option>
                                    <option value="PSP">PSP</option>
                                </select>
                                <em>Selecione plataforma, por ex. Computador para PC </em> 
                            </label> 
                            
                            <label> 
                                <strong>2.</strong> Selecione tipo do jogo <span>*</span>
                                <select name="qualidade" class="text">
                                    <option value="">-- Por Favor Selecione --</option> 
                                    <option value="Full Game">Jogo Completo</option>
                                    <option value="Game Rip">Game Rip</option>
                                </select>
                                <em>Selecione Completo se ele é sem modificações</em>
                            </label>
                        </li>
                        <li style="float:left; width:50%" class="label"> 
                            <label>
                                <strong>3.</strong>Idioma do Jogo <span>*</span><br clear="all" />
                                <table width="307" border="0">
                                    <tr>
                                      <td width="20"><input type="checkbox" name="idioma[portugues]" value="portugues" id="idioma_0" /></td>
                                      <td width="69">Português</td>
                                      <td width="23"><input type="checkbox" name="idioma[ingles]" value="ingles"  id="idioma_1" /></td>
                                      <td width="49">Inglês</td>
                                      <td width="22"><input type="checkbox" name="idioma[japones]" value="japones" id="idioma_2" /></td>
                                      <td width="98"> Japonês</td>
                                    </tr>
                                    <tr>
                                      <td><input type="checkbox" name="idioma[espanhol]" value="espanhol" id="idioma_3" /></td>
                                      <td>Espanhol</td>
                                      <td><input name="topo_analise" type="checkbox" id="topo_analise"  value="1" checked="checked"/>
                                      <label for="topo_analise"></label></td>
                                      <td colspan="3">Adicionar Top Analise</td>
                                    </tr>
                                </table>
                                <em style="color:#666; font-size:11px">Marque o(os) idiomoa(s) que o Jogo tem</em>
                           </label>
                        </li>
                        <li class="doubles">
                           <label>
                                <strong>4.</strong>Tamanho do jogo <span>*</span>
                                <input type="text" name="tamanho" id="tamanho" class="text"/>
                                <em>Digite o tamanho</em>
                           </label>
                        </li>
                        <br clear="all" />
                        <li class="required double">
                            <label>
                                <strong>5.</strong>ID Imagem Capa <span>*</span><br />
                                <input type="text" name="IDImagemCapa" id="IDImagemCapa" class="text"/><br />
                                <em>Digite o id da imagem (NextGen)</em>
                            </label>
                             
                            <label>
                                <strong>5.1.</strong>ID Imagem Post Principal <span>*</span><br />
                                <input type="text" name="IDImagemDescricao" id="IDImagemDescricao" class="text"/><br />
                                <em>Digite o id da imagem de 460x215 (NextGen)</em>
                            </label>
                        </li>
                        
                        <li class="required double">
                            <label>
                                <strong>6.</strong> ID da Imagem <span>*</span><br />
                                <input type="text" name="IDImagem" id="IDImagem" class="text"/><br />
                                <em>Digite o id da Galeria de Imagem - Se for galeria (123-g) se for com WM (123-w) (NextGen)</em>
                            </label>
                       
                            <label>
                                <strong>7.</strong> ID Arquivo de Mídia <span>*</span><br />
                                <input type="text" name="IDVideo" id="IDVideo" class="text"/><br />
                                <em>Digite o ID do arquivo de Vídeo - Se for Playlist acrescente (-p). Ex. (123-p) (Wordtube)</em>
                            </label>
                        </li>
                        <br clear="all" />
                        <li>
                            <label>
                                <strong>8.</strong> ID do Download <br />
                                <input type="text" name="IDDownload" id="IDDownload" class="text"/><br />
                                <em>Digite o ID do Download </em>
                            </label>
                        </li>
                        <br clear="all" />
                    </ul>
                </div>
                <!-- page3 -->
                <div class="page">
                    <h2>
                        <strong>Passo 3: </strong> Finalizado! <b></b>
                        <em>Para enviar, clique em Gerar Dados</em>
                    </h2>
                    <p>    
                      <input class='button-primary' type='submit' name='gerar' value='Gerar Dados' id='submitbutton' />
                    </p>
                </div>
            </div>
        </div>
    </form>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

lucasdidur    0

lucasdidur
Postado

 

beleza. depois posta aqui se deu certo.

 

Deu certo. Era o cache mesmo valeu pela ajuda.

 

 

Encontrei Algo errado. Ele não funciona no Chrome, IE9, e Safari. No Firefox 3.*.10 e no Opera Funciona.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito