Ir para conteúdo

Arquivado

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

marcelobbt

Desabilitar radio buttons de valor igual

Recommended Posts

Tenho uma lista de cursos onde a pessoa deve optar pelos mesmos em ordem de preferência. Então precisava de uma comando que desabilitasse os demais campos que tenham o mesmo valor. Alguém pode me ajudar?

 

Abaixo o código que tentei reaproveitar, mas ele está desabilitando tudo:

<html>
<head>
<script type="text/javascript">
function id( el ){
        return document.getElementById( el );
}
function habilita( el ){
        id( el ).disabled = '';
}
function desabilita_todos( el, tagName ){
        var tags = el.getElementsByTagName( tagName );
        for( var i=0; i<tags.length; i++ )
        {
                tags[i].disabled = 'disabled';
        }
}
window.onload = function()
{
        var radios = document.getElementsByTagName('input');
        for( var i=0; i<radios.length; i++ ){
                if( radios[i].type=='radio' )
                {
                        radios[i].onclick = function(){
                                desabilita_todos( id('palco'), 'input' );         
					habilita( this.value );
                        }
                }
        }
}
</script>
</head>
<body> 
        <div id="palco">
	   <label> 1 <input type="radio" id="curso1" name="curso1" value="1" />
	           2 <input type="radio" id="curso1" name="curso1" value="2" />
		   3 <input type="radio" id="curso1" name="curso1" value="3" />
		   4 <input type="radio" id="curso1" name="curso1" value="4" />
		   Curso 1</label><br>
           <label> 1 <input type="radio" id="curso2" name="curso2" value="1" />
	  	   2 <input type="radio" id="curso2" name="curso2" value="2" />
		   3 <input type="radio" id="curso2" name="curso2" value="3" />
		   4 <input type="radio" id="curso2" name="curso2" value="4" />
		   Curso 2</label><br>
           <label> 1 <input type="radio" id="curso3" name="curso3" value="1" />
	  	   2 <input type="radio" id="curso3" name="curso3" value="2" />
		   3 <input type="radio" id="curso3" name="curso3" value="3" />
		   4 <input type="radio" id="curso3" name="curso3" value="4" />
		   Curso 3</label><br>
        </div>
</body>
</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Tentei dar uma simplificada no código para ver se alguém consegue me ajudar

<html>
<head>
<script type="text/javascript">
function desabilita1 () {
	document.getElementById("curso1").disabled = true;
	document.getElementById("curso2").disabled = false;
	document.getElementById("curso3").disabled = false;
	document.getElementById("curso4").disabled = false;
}

function desabilita2 () {
	document.getElementById("curso1").disabled = false;
	document.getElementById("curso2").disabled = true;
	document.getElementById("curso3").disabled = false;
	document.getElementById("curso4").disabled = false;
}

function desabilita3 () {
	document.getElementById("curso1").disabled = false;
	document.getElementById("curso2").disabled = false;
	document.getElementById("curso3").disabled = true;
	document.getElementById("curso4").disabled = false;
}

function desabilita4 () {
	document.getElementById("curso1").disabled = false;
	document.getElementById("curso2").disabled = false;
	document.getElementById("curso3").disabled = false;
	document.getElementById("curso4").disabled = true;
}

</script>
</head>
<body>
       

	        	1 <input type="radio" id="curso1" onclick="desabilita1()" name="curso1" value="1" />
				2 <input type="radio" id="curso2" onclick="desabilita2()" name="curso1" value="2" />
				3 <input type="radio" id="curso3" onclick="desabilita3()" name="curso1" value="3" />
				4 <input type="radio" id="curso4" onclick="desabilita4()" name="curso1" value="4" />
				Curso 1<br>
            	1 <input type="radio" id="curso1" onclick="desabilita1()" name="curso2" value="1" />
            	2 <input type="radio" id="curso2" onclick="desabilita2()" name="curso2" value="2" />
            	3 <input type="radio" id="curso3" onclick="desabilita3()" name="curso2" value="3" />
            	4 <input type="radio" id="curso4" onclick="desabilita4()" name="curso2" value="4" />
            	Curso 2<br>
            	1 <input type="radio" id="curso1" onclick="desabilita1()" name="curso3" value="1" />
            	2 <input type="radio" id="curso2" onclick="desabilita2()" name="curso3" value="2" />
            	3 <input type="radio" id="curso3" onclick="desabilita3()" name="curso3" value="3" />
            	4 <input type="radio" id="curso4" onclick="desabilita4()" name="curso3" value="4" />
            	Curso 3<br>
</body>
</html>

O problema que ele só está funcionando para a primeira linha. Como faço para expandir para outras linhas?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Exemplo:

http://wbruno.github.io/examples/disable_inputs/

 

<html>
<head>

</head>
<body>

<fieldset id="curso1">
  <legend>Curso 1</legend>
  <label><input type="radio" name="curso1" value="opt1" /> 1</label>
  <label><input type="radio" name="curso1" value="opt2" /> 2</label>
  <label><input type="radio" name="curso1" value="opt3" /> 3</label>
  <label><input type="radio" name="curso1" value="opt4" /> 4</label>
</fieldset>

<fieldset id="curso2">
  <legend>Curso 2</legend>
  <label><input type="radio" name="curso2" value="opt1" /> 1</label>
  <label><input type="radio" name="curso2" value="opt2" /> 2</label>
  <label><input type="radio" name="curso2" value="opt3" /> 3</label>
  <label><input type="radio" name="curso2" value="opt4" /> 4</label>
</fieldset>

<fieldset id="curso3">
  <legend>Curso 3</legend>
  <label><input type="radio" name="curso3" value="opt1" /> 1</label>
  <label><input type="radio" name="curso3" value="opt2" /> 2</label>
  <label><input type="radio" name="curso3" value="opt3" /> 3</label>
  <label><input type="radio" name="curso3" value="opt4" /> 4</label>
</fieldset>

<fieldset id="curso4">
  <legend>Curso 3</legend>
  <label><input type="radio" name="curso4" value="opt1" /> 1</label>
  <label><input type="radio" name="curso4" value="opt2" /> 2</label>
  <label><input type="radio" name="curso4" value="opt3" /> 3</label>
  <label><input type="radio" name="curso4" value="opt4" /> 4</label>
</fieldset>

<script>
(function(){
  function disable_all($elements) {
    var $elements = [].slice.call($elements);
    $elements.forEach(function($each){
      if (!$each.checked)
        $each.setAttribute("disabled", "disabled");
    });
  }
  function disable_all_of_same_value(value) {
    var $radios = document.querySelectorAll("input[type='radio'][value='" + value + "']");
    disable_all($radios);
  }
  function disable_all_of_same_course(fieldset) {
    var $radios = fieldset.querySelectorAll("input[type='radio']");
    disable_all($radios);
  }

  var $radios = document.querySelectorAll("input[type='radio']");
  $radios = [].slice.call($radios);

  $radios.forEach(function($each){
    $each.addEventListener("click", function(){
      disable_all_of_same_value(this.value);
      disable_all_of_same_course(this.parentNode.parentNode);
    });
  });

}());
</script>
</body>
</html>
Tentei fazer o código bem explicativo, com as duas funções principais bem separadas e nomeadas, para facilitar o entendimento.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Muito obrigado William. Era isso que queria.

 

Apenas desabilitei a função abaixo para que a pessoa pudesse mudar a opção caso tenha clicado errado.

function disable_all_of_same_course(fieldset) {
    var $radios = fieldset.querySelectorAll("input[type='radio']");
    disable_all($radios);
  }

Só que ao mudar de opção, ele não habilita novamente os botões desabilitados. Como faço isso possível?

Compartilhar este post


Link para o post
Compartilhar em outros sites

O post ainda não está 100% resolvido. Faltou um ponto que coloquei no post #5, por isso não marquei como resolvido.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ai fica só um pouco mais complicado, pois vc precisa "lembrar" quem já tinha sido marcado:

 

<html>
<head>

</head>
<body>

<fieldset id="curso1">
  <legend>Curso 1</legend>
  <label><input type="radio" name="curso1" value="opt1" /> 1</label>
  <label><input type="radio" name="curso1" value="opt2" /> 2</label>
  <label><input type="radio" name="curso1" value="opt3" /> 3</label>
  <label><input type="radio" name="curso1" value="opt4" /> 4</label>
</fieldset>

<fieldset id="curso2">
  <legend>Curso 2</legend>
  <label><input type="radio" name="curso2" value="opt1" /> 1</label>
  <label><input type="radio" name="curso2" value="opt2" /> 2</label>
  <label><input type="radio" name="curso2" value="opt3" /> 3</label>
  <label><input type="radio" name="curso2" value="opt4" /> 4</label>
</fieldset>

<fieldset id="curso3">
  <legend>Curso 3</legend>
  <label><input type="radio" name="curso3" value="opt1" /> 1</label>
  <label><input type="radio" name="curso3" value="opt2" /> 2</label>
  <label><input type="radio" name="curso3" value="opt3" /> 3</label>
  <label><input type="radio" name="curso3" value="opt4" /> 4</label>
</fieldset>

<fieldset id="curso4">
  <legend>Curso 3</legend>
  <label><input type="radio" name="curso4" value="opt1" /> 1</label>
  <label><input type="radio" name="curso4" value="opt2" /> 2</label>
  <label><input type="radio" name="curso4" value="opt3" /> 3</label>
  <label><input type="radio" name="curso4" value="opt4" /> 4</label>
</fieldset>

<script>
(function(){
  var choices = {};

  function enable_all($elements) {
    var $elements = [].slice.call($elements);
    $elements.forEach(function($each){
      if (!$each.checked) {
        console.log($each);
        $each.removeAttribute("disabled");
      }
    });
  }
  function disable_all($elements) {
    var $elements = [].slice.call($elements);
    $elements.forEach(function($each){
      if (!$each.checked) {
        $each.setAttribute("disabled", "disabled");
      }
    });
  }
  function disable_all_of_same_value(value) {
    var $radios = document.querySelectorAll("input[type='radio'][value='" + value + "']");
    disable_all($radios);
  }
  function enable_all_of_same_value(value) {
    var $radios = document.querySelectorAll("input[type='radio'][value='" + value + "']");
    enable_all($radios);
  }

  var $radios = document.querySelectorAll("input[type='radio']");
  $radios = [].slice.call($radios);

  $radios.forEach(function($each){
    $each.addEventListener("click", function() {
      if (choices[this.name]) {
        enable_all_of_same_value(choices[this.name]);
      }

      choices[this.name] = this.value;
      disable_all_of_same_value(this.value);
    });
  });

}());
</script>
</body>
</html>

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.