Problema JavaScript - [Ajuda]

1 de julho de 2011 4 respostas

edu_fernandes 1 de julho de 2011

Gostaria da ajuda de vocês pois estou com um problema com JS.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript">
  
function desativaCampo(num,campo){
  var linha = "linha_"+num;
  
  if(campo.checked){
    document.getElementById(linha).disabled = true; //Desabilitado
  }else{
	  document.getElementById(linha).disabled = false; //Habilitado
	  }
}
</script>
</head>

<body>

<form name="formulario">
<table width="200" border="0" cellspacing="3" cellpadding="0">
  <tr>
    <td><select id="linha_1">
          <option>1</option>
          <option>2</option>
          <option>3</option>
       </select>
    </td>
    <td><select id="linha_1">
          <option>1</option>
          <option>2</option>
          <option>3</option>
       </select></td>
    <td><input type="checkbox"  onclick="desativaCampo(1,this)"/></td>
  </tr>
  <tr>
    <td><select id="linha_2">
          <option>1</option>
          <option>2</option>
          <option>3</option>
       </select></td>
    <td><select id="linha_2">
          <option>1</option>
          <option>2</option>
          <option>3</option>
       </select></td>
    <td><input type="checkbox"  onclick="desativaCampo(2,this)" /></td>
  </tr>
  <tr>
    <td><select id="linha_3">
          <option>1</option>
          <option>2</option>
          <option>3</option>
       </select></td>
    <td><select id="linha_3">
          <option>1</option>
          <option>2</option>
          <option>3</option>
       </select></td>
    <td><input type="checkbox" onclick="desativaCampo(3,this)" /></td>
  </tr>
  
</table>
</form>
</body>
</html>

Mas essa função disabilita apenas o primeiro de cada linha.
Por que será que isso acontece??
Ou até uma outra forma de fazer isso??

Desde já agradeço a todos que responderem.

4 Respostas

drsmachado 1 de jul. de 2011

Vamos sair dessa questão e vamos considerar uma outra: Se você submeter este formulário, como vai pegar os valores do linha_1, já que possui dois deles?
Sugiro criar um id único para cada elemento e, realizar uma forma mais adequada de desabilitar ou habilitar os elementos.
Quem sabe criando um número adicional, como 1, 2, 3… e iterando sobre eles.

edu_fernandes 1 de jul. de 2011

Esse é apenas um exemplo.
Posteriormente eu colocaria o nome em cada .

drsmachado 1 de jul. de 2011

Bom, então você já sabe o que irá fazer.
eu faria

<select id="linha_11>...
//
E um for no javascript
for(e = 1; e < 3; e++){
var linha = "linha_"+ num + e;
if(campo.checked){  
    document.getElementById(linha).disabled = true; //Desabilitado  
  }else{  
      document.getElementById(linha).disabled = false; //Habilitado  
      }

edu_fernandes 1 de jul. de 2011

Muito boa sua dica.
Não tinha pensado dessa forma.

Fiz aqui e ficou assim.

//JS
function desativaCampo(num,campo){
	
	for(e = 1; e <= 3; e++){
		//Atribuindo o id de cada <select>
		var linha = "linha_" + num +"_" + e;
  
		//Verifica se o campo está marcado
		if(campo.checked){
			document.getElementById(linha).disabled = true; //Desabilitado
		}else{		
			document.getElementById(linha).disabled = false; //Habilitado
		}
	}
}//dasaticaCampo

//HTML
<form name="formulario">
<table width="200" border="0" cellspacing="3" cellpadding="0">
  <tr>
    <td><select id="linha_1_1">
          <option>1</option>
          <option>2</option>
          <option>3</option>
       </select>
    </td>
    <td><select id="linha_1_2">
          <option>1</option>
          <option>2</option>
          <option>3</option>
       </select></td>
    <td><input type="checkbox"  onclick="desativaCampo(1,this)"/></td>
  </tr>
  <tr>
    <td><select id="linha_2_1">
          <option>1</option>
          <option>2</option>
          <option>3</option>
       </select></td>
    <td><select id="linha_2_2">
          <option>1</option>
          <option>2</option>
          <option>3</option>
       </select></td>
    <td><input type="checkbox"  onclick="desativaCampo(2,this)" /></td>
  </tr>
  <tr>
    <td><select id="linha_3_1">
          <option>1</option>
          <option>2</option>
          <option>3</option>
       </select></td>
    <td><select id="linha_3_2">
          <option>1</option>
          <option>2</option>
          <option>3</option>
       </select></td>
    <td><input type="checkbox" onclick="desativaCampo(3,this)" /></td>
  </tr>
  
</table>
</form>

Obrigado.

Criado 1 de julho de 2011

Ultima resposta 1 de jul. de 2011

Respostas 4

Participantes 2

4 Respostas

Topicos relacionados