Habilitando e desabilitando opção de um select em um formulário com Jquery

Desenvolvimento, Javascript, Tecnologia, jQuery Add comments

Hoje ensinarei como habilitar e desabilitar determinada opção de um select em um formulário.
Utilizarei o mesmo modo de criar formulários acessíveis.

<script src="http://www.qosmio.com.br/wp-admin/js/jquery-1.2.6.pack.js" type="text/javascript"><!--mce:0--></script>
<script src="http://www.qosmio.com.br/wp-admin/js/cmxforms.js" type="text/javascript"><!--mce:1--></script>
<script src="http://www.qosmio.com.br/wp-admin/js/disabled.js" type="text/javascript"><!--mce:2--></script>
<div class="cmxform">
 
Campos de preenchimento obrigatório. Contém<em>*</em>
 
<fieldset>
<legend>Cadastrar Níveis</legend>
<ol>
	<li>
<label for="field">Campo:<em>*</em></label>
<select>
<option value="1">Campo 1</option>
<option value="2">Campo 2</option>
<option value="3">Campo 3</option>
<option value="4">Campo 4</option>
<option value="5">Campo 5</option>
<option value="6">Nível 1</option>
<option value="7">Nível 2</option>
<option value="8">Nível 3</option>
<option value="9">Nível 4</option>
<option value="10">Nível 5</option>
<option value="11">Nível 6</option>
<option value="12">Nível 7</option>
<option value="13">Nível 8</option>
<option value="14">Nível 9</option>
<option value="15">Nível 10</option>
<option value="16">Nível 11</option>
<option value="17">Nível 12</option>
<option value="18">Nível 13</option>
<option value="19">Nível 14</option>
<option value="20">Nível 15</option>
</select></li>
	<li>
<label for="action">Ação:<em>*</em></label>
<select>
<option id="markup">-----------------</option>
<option id="enable">Cadastrar</option>
<option id="alter">Alterar</option>
<option id="delete">Excluir</option>
</select></li>
</ol>
</fieldset>
</div>

Aqui o meu Javascript

$(document).ready(function () {
// Ao terminar carregamento da pagina desabilita o campo cadastrar
$("#enable").attr("disabled","true");
 
$("select").click(function() {
 
var thisValue = $(this).val();
 
switch(thisValue)	{
 
case "1":
$("#enable").attr("disabled","true");
$("#alter").removeAttr("disabled");
$("#delete").removeAttr("disabled");
$("#markup").attr("selected","selected");
break;
 
case "2":
$("#enable").attr("disabled","true");
$("#alter").removeAttr("disabled");
$("#delete").removeAttr("disabled");
$("#markup").attr("selected","selected");
break;
 
case "3":
$("#enable").attr("disabled","true");
$("#alter").removeAttr("disabled");
$("#delete").removeAttr("disabled");
$("#markup").attr("selected","selected");
break;
 
case "4":
$("#enable").attr("disabled","true");
$("#alter").removeAttr("disabled");
$("#delete").removeAttr("disabled");
$("#markup").attr("selected","selected");
break;
 
case "5":
$("#enable").attr("disabled","true");
$("#alter").removeAttr("disabled");
$("#delete").removeAttr("disabled");
$("#markup").attr("selected","selected");
break;
 
case "6":
$("#enable").removeAttr("disabled");
$("#enable").attr("selected","selected");
$("#alter").attr("disabled","true");
$("#delete").attr("disabled","true");
break;
 
case "7":
$("#enable").removeAttr("disabled");
$("#enable").attr("selected","selected");
$("#alter").attr("disabled","true");
$("#delete").attr("disabled","true");
break;
 
case "8":
$("#enable").removeAttr("disabled");
$("#enable").attr("selected","selected");
$("#alter").attr("disabled","true");
$("#delete").attr("disabled","true");
break;
 
case "9":
$("#enable").removeAttr("disabled");
$("#enable").attr("selected","selected");
$("#alter").attr("disabled","true");
$("#delete").attr("disabled","true");
break;
 
case "10":
$("#enable").removeAttr("disabled");
$("#enable").attr("selected","selected");
$("#alter").attr("disabled","true");
$("#delete").attr("disabled","true");
break;
 
case "11":
$("#enable").removeAttr("disabled");
$("#enable").attr("selected","selected");
$("#alter").attr("disabled","true");
$("#delete").attr("disabled","true");
break;
 
case "12":
$("#enable").removeAttr("disabled");
$("#enable").attr("selected","selected");
$("#alter").attr("disabled","true");
$("#delete").attr("disabled","true");
break;
 
case "13":
$("#enable").removeAttr("disabled");
$("#enable").attr("selected","selected");
$("#alter").attr("disabled","true");
$("#delete").attr("disabled","true");
break;
 
case "14":
$("#enable").removeAttr("disabled");
$("#enable").attr("selected","selected");
$("#alter").attr("disabled","true");
$("#delete").attr("disabled","true");
break;
 
case "15":
$("#enable").removeAttr("disabled");
$("#enable").attr("selected","selected");
$("#alter").attr("disabled","true");
$("#delete").attr("disabled","true");
break;
 
case "16":
$("#enable").removeAttr("disabled");
$("#enable").attr("selected","selected");
$("#alter").attr("disabled","true");
$("#delete").attr("disabled","true");
break;
 
case "17":
$("#enable").removeAttr("disabled");
$("#enable").attr("selected","selected");
$("#alter").attr("disabled","true");
$("#delete").attr("disabled","true");
break;
 
case "18":
$("#enable").removeAttr("disabled");
$("#enable").attr("selected","selected");
$("#alter").attr("disabled","true");
$("#delete").attr("disabled","true");
break;
 
case "19":
$("#enable").removeAttr("disabled");
$("#enable").attr("selected","selected");
$("#alter").attr("disabled","true");
$("#delete").attr("disabled","true");
break;
 
case "20":
$("#enable").removeAttr("disabled");
$("#enable").attr("selected","selected");
$("#alter").attr("disabled","true");
$("#delete").attr("disabled","true");
break;
}
})
})

Exemplo

Adicione ->del.icio.us | Reddit | Slashdot | Digg | Facebook | Technorati | Google | StumbleUpon | Windows Live | Tailrank | Furl | Netscape | Yahoo | BlinkList

Comments are closed.

WP Theme & Icons by N.Design Studio
Entries RSS Comments RSS Log in