Ir para conteúdo

Arquivado

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

mpaulo

input disabled não funciona o click

Recommended Posts

Fala pessoal beleza?

então eu estou tentando fazer um esquema mais não estou conseguindo, para um input disabled, quando clicar no input e ele estiver desabilitado, apareça um alert que está desabilitado se não estiver abilitado não faça nada.

 

agradeço desde já.

 

segue o código que estou tentando:

$(function(){
 if($("#aceite").attr('disabled')){
    $("#aceite").click(function(){
        alert("O input está desabilitado.");
    });
}
}); 
<input name="aceite" id="aceite" value="aceite" type="checkbox"  disabled />

Compartilhar este post


Link para o post
Compartilhar em outros sites

Tenta assim:

<div id="aceite"><input id="aceite-input" type="text" value="ola" disabled /></div>
<script>
	jQuery(document).ready(function($){
		var inputAceite = $('#aceite-input'),
		    aceite      = $('#aceite');
		aceite.click(function(){
		   if(inputAceite[0].disabled === true){
			alert("Input desabilitado");

		   }
		});
	});
									</script>

Compartilhar este post


Link para o post
Compartilhar em outros sites

então Douglas assim funcionou apenas com input text e eu preciso para o input checkbox e não funcionou tem que clicar fora do input checkbox.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Então maninho, quando a gente usa o disabled no input ele é desabilitado até mesmo para usar eventos de click, eu tentei passar uma ideia de mascara para o input, eu fiz outro exemplo, só que em javascript direto.

Faz um teste ai...

Não sei o jeito certo de fazer isso, mas essa é uma alternativa que eu faria:

<style>
    .mascara{
        width:15px;
        height:15px;
        position:relative;
    }
    #click{
        width:15px;
        height:15px;
        position:absolute;
        z-index:2;
    }
    #aceite{
        position:absolute;
        z-index:1;
    }
    </style>
    <div class="mascara"><div id="click"></div><input name="aceite" id="aceite" class="aceite" value="aceite" type="checkbox" /></div>
    <script>
        var aceite  = document.getElementById('aceite'),
            clicado = document.getElementById('click');
            aceite.disabled = true;

            clicado.addEventListener('click',function(){
                if(aceite.disabled == true){
                    alert('Input Desabilitado');
                }
            });
    </script>

Espero ter ajudado, esse esquema de input disabled é bem complicado rsrs...

Vou procurar aprender mais sobre esse assunto, boa sorte!!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Eu desabilito assim, mas é como o Douglas falou, precisa fazer uma gambiarra... a minha function:

function desabilitarBox(comboBox){  
	if(comboBox == "comboDispositivo"){
		document.getElementById("VeSelecionado").disabled = true;
	} else {
		document.getElementById("DispSelecionado").disabled = true;
	}
}

Compartilhar este post


Link para o post
Compartilhar em outros sites


$(':input').parent().click(function(){

if( $( this ).children(':input').is(':disabled') ){

alert('desabilitado!');

}

});


<p><label>Text:</label><input type="text" disabled /></p>

<p><label>CheckBox:</label><input type="checkbox" disabled /></p>

<p><label>Radio:</label><input type="radio" disabled /></p>

<p><label>File:</label><input type="file" disabled /></p>

<p><label>Textarea:</label><textarea disabled ></textarea></p>

<p><label>Select:</label><select disabled ><option>Select</option></select></p>

<p><label>Button:</label><button disabled >Button</button></p>

Compartilhar este post


Link para o post
Compartilhar em outros sites
<input type="text" class="disabled" id="sample">
document.getElementById("sample").addEventListener("focus", function () {
    if (/disabled/.test(this.class)) {
        alert("desabilitado");
        this.blur();
    }
});

// jQuery, mesma coisa
$("#sample").on("focus", function () {
    if (/disabled/.test(this.class)) {
        alert("desabilitado");
        this.blur();
    }
});

Aí você estiliza a classe [inline].disabled[/inline] com CSS.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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