Habilitar e Desabilitar ComboBox com outro selecionado

[rdpacato 2]

Pessoal,

 

Fiz esse js para desabilitar o combobox quando outro é selecionado, mas não queria simplesmente desabilitar o outro... eu queria que se o outro combo (que foi desabilitado) for clicado inverta o bloqueio...

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

<select name="dispositivo" id="DispSelecionado" style="width:125px;" onclick="desabilitarBox('comboDispositivo')">

Mas quando ele desabilita um deles, ele não aceita o onclick no outro

[Lucas M. Martins 5]

Não está meio claro, você quer que só um fique habilitado ? Se um está checado o outro não pode estar e assim vice-versa?

[rdpacato 2]

Isso Lukas.. só que não quero que impossibilite da pessoa mudar de decisão... entendeu?

 

Tipo assim, do jeito que está está funcionando, ela seleciona um e o outro trava.. mas se ela quiser mudar de ideia não da, pq já está bloqueado...

 

 

É que no layout não cabe um checkbox para tratar isso.. por isso queria deixar no combo mesmo..

[Evandro Oliveira 331]

Use fieldsets:

 

 

    <fieldset>
        <legend>
            <label for="useFirstOption">
                <input type="radio" name="use_option" value="first" id="useFirstOption" />
                <span>Usar a primeira opção</span>
            </label>
        </legend>
        <label for="firstOption">
            <select name="primeira_opcao" id="firstOption">
                <option>Valor da primeira opção</option>
            </select>
        </label>
    </fieldset>
    <fieldset>
        <legend>
            <label for="useSecondOption">
                <input type="radio" name="use_option" value="second" id="useSecondOption" />
                <span>Usar a segunda opção</span>
            </label>
        </legend>
        <label for="secondOption">
            <select name="primeira_opcao" id="secondOption">
                <option>Valor da segunda opção</option>
            </select>
        </label>
    </fieldset>

 

 

    (function (window) {
        "use strict";
        var i, ln, options;
        options = document.getElementsByTagName("input");
        options = Array.prototype.slice.call(options);
        options = options.filter(function (element) {
            return /use_option/.test(element.name);
        });
        options.fieldsets = document.getElementsByTagName("fieldset");
        options.map(function (element) {
            element.related = element.parentNode.parentNode.parentNode;
            element.addEventListener("click", function () {
                for (i = 0, ln = options.fieldsets.length; i < ln; i += 1) {
                    options.fieldsets[i].disabled = true;
                }
                this.related.disabled = false;
            });
        });
    }(window));

[rdpacato 2]

Oi Evandro, obrigado pela ajuda, mas não funcionou...

 

Além de que no layout do site não posso adicionar mais um radio button

[Evandro Oliveira 331]

Envolva os elementos em [inline]<SPAN>[/inline] e adicione os listeners de clique à elas, como já sugeriram.

[rdpacato 2]

Oi Evandro, tentei, mas mesmo assim não vai, ele desabilita, mas quando clico nele de volta não habilita...

		<span id="troca" onclick="desabilitarBox('comboGrama')">
			<div id="comboGrama">
				<select name="grama" id="GraSelecionado" style="width:125px;">
				</select>
			</div>
		</span>
		<span id="troca" onclick="desabilitarBox('comboDispositivo')">
			<div id="comboDispositivo">
				<select name="dispositivo" id="DispSelecionado" style="width:125px;">
				</select>					
			</div>
		</span>

Função:

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

[wilnet 92]

Olá rdpacato,

 

Talvez seja um pouco diferente do que deseja, mas veja se ajuda em alguma coisa pra vc.

<html>
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
        $("#palco > div").hide();
        $("#sel-escolha").change(function(){
                $("#palco > div").hide();
                $( '#'+$( this ).val() ).show('fast');
        });
});
</script>

</head>
<body>

<select id="sel-escolha" name="sel-escolha">
<option value="">Escolha um Item</option>
<option value="doces">Doces</option>
<option value="salgados">Salgados</option>
<option value="bebidas">Bebidas</option>
</select>

<div id="palco">
<br />

<div id="doces">
<select name="doce" id="doce">
<option value="">Escolha o Doce</option>
<option value="bolo">Bolo</option>
<option value="chocolate">Chocolate</option>
<option value="tortas">Tortas</option>
</select>
</div>

<div id="salgados">
<select name="salgado" id="salgado">
<option value="">Escolha o Salgado</option>
<option value="coxinha">Coxinha</option>
<option value="esfiha">Esfiha</option>
<option value="empada">Empada</option>
</select>
</div>

<div id="bebidas">
<select name="bebida" id="bebida">
<option value="">Escolha a Bebida</option>
<option value="coca">Coca</option>
<option value="fanta">Fanta</option>
<option value="guarana">Guarana</option>
</select>
</div>

</div>

</body>
</html> 

[rdpacato 2]

não posso esconder.... tenho que permanecer os dois.. :( mas valeu pela dica

[Evandro Oliveira 331]

Eu desencorajaria essa prática por conta de acessibilidade. Por exemplo, não é possível selecionar o elemento desabilitado pela tecla TAB.

[rdpacato 2]

Eu travei com isso... não sei como resolver... não posso usar radio buttons para selecionar um ou outro, e não posso deixar selecionar um combo se outro estiver selecionado...

 

Pensei em fazer assim, colocando no valor 0 ele habilita o outro.. mas não fica intuitivo...

[Evandro Oliveira 331]

Cria a opção "Usar dispositivo" no combo da grama e "Usar grama" no combo do dispositivo

[rdpacato 2]

Olá Evandro...

 

Consegui com sua dica... mas queria setar o valor default quando voltasse a habilitar o outro campo

 

coloquei a função:

function desabilitarBox(comboBoxValue, comboBox){  
	if(comboBox == "comboGrama"){
		document.getElementById("DispSelecionado").disabled = true;
		if(comboBoxValue == "dispositivo"){
			document.getElementById("GramaSelecionado").disabled = true;
			document.getElementById("DispSelecionado").disabled = false;
		}
	} else if (comboBox == "comboDispositivo"){
		document.getElementById("GramaSelecionado").disabled = true;
		if(comboBoxValue == "grama"){
			document.getElementById("DispSelecionado").disabled = true;
			document.getElementById("GramaSelecionado").disabled = false;
		}
	}
}

No select:

				<    <select name="grama" id="GramaSelecionado" style="width:125px;" onchange="desabilitarBox(this.value, 'comboGrama')">
     <option value="dispositivo">Selecionar DISPOSITIVO</option>
     <option value="1"selected="selected">GRAMA</option>
    </select>
    
    
    <select name="dispositivo" id="DispSelecionado" style="width:125px;" onchange="desabilitarBox(this.value,'comboDispositivo')">
     <option value="grama">Selecionar GRAMA</option>
     <option value="1"selected="selected">DISPOSITIVO</option>
    </select> 

Consegui... mas queria setar o valor do option com o Default que deixei quando habilitasse o outro... pois senão fica os dois lados com "selecionar o oposto" .... fica zuado...

[rdpacato 2]

consegui adicionando dentro da condição de cada um o oposto :

document.getElementById("DispSelecionado").value = "0";