Bloquear input

XandyW · Maio 18, 2011

Bom dia.

Estou tento um problema em um de meus projetos. O usuário seleciona qual mês pretende preencher os dados e é gerado um formulário com todos os dias do mês. Quero que ao selecionar uma checkbox relativa ao dia, o respectivo input fique disabled.

Obs: o id de cada input é a data correspondente, por exemplo:

18/05/2011 <input type='text' id='18-05-2011' name='18-05-2011'>

Tenko · Maio 20, 2011

Bom dia

Vê se é isso que você quer:

<html>
    <head>
        <title></title>
        
        <script>
        function travaDestrava( valor )
        {
            var oElementos = document.getElementsByTagName( 'input' );
            var iElementos = oElementos.length;
            
            for( var i = 0; i < iElementos; i++ )
            {
                if( oElementos[ i ].id == valor )
                {
                    oElementos[ i ].disabled = true;
                    oElementos[ i ].style.backgroundColor = '#f2f2f2';
                }
                else
                {
                    oElementos[ i ].disabled = false;
                    oElementos[ i ].style.backgroundColor = '#ffffff';
                }
            }
        }
        </script>
        
    </head>
    
    <body>
    
        <select id="selDia" onchange="java script:travaDestrava( this.value );">
            <option value="">:: Informe ::</option>
            <option value="18-05-2011">18-05-2011</option>
            <option value="19-05-2011">19-05-2011</option>
            <option value="20-05-2011">20-05-2011</option>
            <option value="21-05-2011">21-05-2011</option>
            <option value="22-05-2011">22-05-2011</option>
            <option value="23-05-2011">23-05-2011</option>
        </select>
    
        <br/>
        <br/>
    
        <input type="text" id='18-05-2011' value='18-05-2011' style="background-color:#ffffff"><br/>
        <input type="text" id='19-05-2011' value='19-05-2011' style="background-color:#ffffff"><br/>
        <input type="text" id='20-05-2011' value='20-05-2011' style="background-color:#ffffff"><br/>
        <input type="text" id='21-05-2011' value='21-05-2011' style="background-color:#ffffff"><br/>
        <input type="text" id='22-05-2011' value='22-05-2011' style="background-color:#ffffff"><br/>
        <input type="text" id='23-05-2011' value='23-05-2011' style="background-color:#ffffff"><br/>
    
    </body>
</html>

Editado Julho 13, 2011 por kuroi
Adicionar tag CODE

XandyW · Julho 13, 2011

Consegui adaptar o seu código para o meu caso que é um pouco diferente.

Só não consigo desabilitar:

function habilitaCamposFeriado(idInput){
    
// Pega todos campos com nome parecido
    
var oElementos = document.getElementsByTagName( 'input');
    
// Conta quantos campos tem o nome parecido
    
var iElementos = oElementos.length;
    
var feriado = "feriado-";  

for( var i = 0; i < iElementos; i++ )
    {
        
// Confere se está com o mesmo ID
        
if( oElementos[ i ].id == idInput )
 {
            
// Confere se não é o campo folga
            
if(oElementos[i].name == feriado+idInput)
            
{
  // Ele fica habilitado
                
oElementos[ i ].disabled = false;
            
}
else
{
                
// Caso contrário, desabilita
                
oElementos[ i ].value = "******";
                
oElementos[ i ].disabled = true;
    }

}
    }

}

Meu caso:

Quando marcar o Checkbox1 (feriado), os campos TEXT 1 à 4 e checkbox2 (folga) ficarão disabled.

Quando marcar o Checkbox2 (folga), os campos TEXT 1 à 4 ficarão em readOnly (com valor=FOLGA) e o checkbox1 (feriado) ficará disabled.

Até aí tudo bem.

Só não consigo fazer a operação inversa. Quando clica de novo do CheckBox, desfaz tudo e fica tudo zerado.

XandyW · Julho 15, 2011

Utilizei o mesmo código, mas usando radio butons.

Está funcionando bem.

Entrar

Bloquear input

Pergunta

XandyW

Link para o comentário

Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

Tenko

Link para o comentário

Compartilhar em outros sites

XandyW

Link para o comentário

Compartilhar em outros sites

XandyW

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades