Habilitando e desabilitando opção de um select em um formulário com Jquery
Desenvolvimento, Javascript, Tecnologia, jQuery Add commentsHoje 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; } }) })


Recent Comments