How to enable and disable fields by clicking button

Asked

Viewed 37,193 times

8

I have a page made with bootstrap 3 where I show some fields coming from my BD, now when opening the page I need all fields except a button Iniciar Tarefa are disabled, the button Iniciar Tarefa will be responsible for enabling the fields for editing.

I’m trying to use it, but without success:


$(document).READY(function() {

// PARA HABILITAR OS CAMPOS DO FORMULÁRIO, MUDAR O true PARA false
$("#form :input").prop("disabled", true); // DESABILITA TODOS OS CAMPOS

});

This is the form:

<form class="form-horizontal">


<!-- Form Name -->
<legend>Atividade</legend>

<!-- Button -->
<div class="form-group">
  <label class="col-md-4 control-label" for="IniciarTarefa"></label>
  <div class="col-md-4">
    <button id="IniciarTarefa" name="IniciarTarefa" class="btn btn-info">Iniciar Tarefa</button>
  </div>
</div>

<!-- Select Basic -->
<div class="form-group">
  <label class="col-md-4 control-label" for="Etapa">Etapa</label>
  <div class="col-md-4">
    <select id="Etapa" name="Etapa" class="form-control">
      <option value="1">Opção 1</option>
      <option value="2">Opção 2</option>
    </select>
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="Ordem">Ordem</label>
  <div class="col-md-4">
    <input id="Ordem" name="Ordem" type="text" placeholder="Ordem" class="form-control input-md" required="">
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="Nome">Nome</label>
  <div class="col-md-4">
    <input id="Nome" name="Nome" type="text" placeholder="Nome" class="form-control input-md" required="">
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="LinkDocumento">Link Documento</label>
  <div class="col-md-4">
    <input id="LinkDocumento" name="LinkDocumento" type="text" placeholder="Link do Documento" class="form-control input-md" required="">
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="DataInicio">Data In&iacute;cio</label>
  <div class="col-md-4">
    <input id="DataInicio" name="DataInicio" type="text" placeholder="Data In&iacute;cio" class="form-control input-md" required="">
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="DataFinal">Data Final</label>
  <div class="col-md-4">
    <input id="DataFinal" name="DataFinal" type="text" placeholder="Data Final" class="form-control input-md" required="">
  </div>
</div>

<!-- Prepended checkbox -->
<div class="form-group">
  <label class="col-md-4 control-label" for="Enviar"></label>
  <div class="col-md-4">
    <div class="input-group"> <span class="input-group-addon">
      <input type="checkbox">
      </span>
      <input id="Enviar" name="Enviar" class="form-control" type="text" placeholder="Enviar E-mail">
    </div>
  </div>
</div>

<!-- Textarea -->
<div class="form-group">
  <label class="col-md-4 control-label" for="Descricao">Descrição</label>
  <div class="col-md-4">
    <textarea class="form-control" id="Descricao" name="Descricao"></textarea>
  </div>
</div>

<!-- Multiple Radios -->
<div class="form-group">
  <label class="col-md-4 control-label" for="Status">Status</label>
  <div class="col-md-4">
    <div class="radio">
      <label for="Status-0">
        <input type="radio" name="Status" id="Status-0" value="1" checked="checked">
        Iniciada </label>
    </div>
    <div class="radio">
      <label for="Status-1">
        <input type="radio" name="Status" id="Status-1" value="2">
        Finalizada </label>
    </div>
    <div class="radio">
      <label for="Status-2">
        <input type="radio" name="Status" id="Status-2" value="3">
        Cancelada </label>
    </div>
  </div>
</div>

<!-- Button -->
<div class="form-group">
  <label class="col-md-4 control-label" for="FinalizarTarefa"></label>
  <div class="col-md-4">
    <button id="FinalizarTarefa" name="FinalizarTarefa" class="btn btn-info">Finalizar Tarefa</button>
  </div>
</div>

jquery

  • These links may be useful to you: http://stackoverflow.com/questions/1416900/how-to-disable-all-input-insida-form-with-jquery / http://stackoverflow.com/questions/1414365/disable-enable-an-input-with-jquery On one of these links it says the following:: If you only want the <input> elements:&#xA;&#xA;$("#target input").prop("disabled", true); So remove the dois pontos and #(because your form does not have a defined id) #form :input, being like this: $('form input').prop('disabled', true/false);

  • Hello @Rafaelwithoeft, thanks for sharing.

  • For nothing, it managed to solve the problem?

  • I’m here making the changes.

3 answers

6


Well, you can start with your inputs with the option disabled and enable by clicking the button Iniciar Tarefa

your script would look something like this:

$(document).ready(function() {
    $("#enable").click(function (){
                // habilita o campo 
        $("input").prop("disabled", false);

    });

    $("#disable").click(function (){
                // desabilita o campo 
        $("input").prop("disabled", true);

    });
});

And in their inputs you can start with them like this:

<input type="text" id="campo" name="campo1" disabled/>

Follow an example on Jsfiddle 

$(document).ready(function() {
	$("#enable").click(function (){
                // habilita o campo 
		$("input").prop("disabled", false);
		
	});
    
    $("#disable").click(function (){
                // desabilita o campo 
		$("input").prop("disabled", true);
		
	});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Entre com os dados: <input type="text" id="campo" name="campo" disabled/>
<br/><br/>
Entre com os dados: <input type="text" id="campo" name="campo1" disabled/> 
<br/><br/>
<button href="#" id="enable" >Habilita Campos</button>

<button href="#" id="disable" >Desabilita Campos</button>

  • Hello @Renilson Andrade, thanks for the excellent tip, very good indeed.

5

You can create a function to define the state of the elements, for example:

function setDisabled(state){
  $('.form-horizontal input,select,textarea').each(function(){
     $(this).prop("disabled", state);
  });
}

Calling her setDisabled(true) to disable the elements or setDisabled(false) make them accessible.

$(function(){
   setDisabled(true); 
   
   $("#IniciarTarefa").on("click", function(e){
       e.preventDefault();
       setDisabled(false);
   });
  
   $("#FinalizarTarefa").on("click", function(e){
       e.preventDefault();
        setDisabled(true);
   });
   
   function setDisabled(state){
     $('.form input,select,textarea').each(function(){
       $(this).prop("disabled", state);
     });
   }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'/>

<form class="form" action="#">
    <fieldset>

        <!-- Form Name -->
        <legend>Atividade</legend>

        <!-- Button -->
        <div class="form-group">
            <label class="col-md-4 control-label" for="IniciarTarefa"></label>
            <div class="col-md-4">
                <button id="IniciarTarefa" name="IniciarTarefa" class="btn btn-info">Iniciar Tarefa</button>
            </div>
        </div>

        <!-- Select Basic -->
        <div class="form-group">
            <label class="col-md-4 control-label" for="Etapa">Etapa</label>
            <div class="col-md-4">
                <select id="Etapa" name="Etapa" class="form-control">
                    <option value="1">Opção 1</option>
                    <option value="2">Opção 2</option>
                </select>
            </div>
        </div>

        <!-- Text input-->
        <div class="form-group">
            <label class="col-md-4 control-label" for="Ordem">Ordem</label>
            <div class="col-md-4">
                <input id="Ordem" name="Ordem" type="text" placeholder="Ordem" class="form-control input-md" required="">
            </div>
        </div>

        <!-- Text input-->
        <div class="form-group">
            <label class="col-md-4 control-label" for="Nome">Nome</label>
            <div class="col-md-4">
                <input id="Nome" name="Nome" type="text" placeholder="Nome" class="form-control input-md" required="">
            </div>
        </div>

        <!-- Text input-->
        <div class="form-group">
            <label class="col-md-4 control-label" for="LinkDocumento">Link Documento</label>
            <div class="col-md-4">
                <input id="LinkDocumento" name="LinkDocumento" type="text" placeholder="Link do Documento" class="form-control input-md" required="">
            </div>
        </div>

        <!-- Text input-->
        <div class="form-group">
            <label class="col-md-4 control-label" for="DataInicio">Data In&iacute;cio</label>
            <div class="col-md-4">
                <input id="DataInicio" name="DataInicio" type="text" placeholder="Data In&iacute;cio" class="form-control input-md" required="">
            </div>
        </div>

        <!-- Text input-->
        <div class="form-group">
            <label class="col-md-4 control-label" for="DataFinal">Data Final</label>
            <div class="col-md-4">
                <input id="DataFinal" name="DataFinal" type="text" placeholder="Data Final" class="form-control input-md" required="">
            </div>
        </div>

        <!-- Prepended checkbox -->
        <div class="form-group">
            <label class="col-md-4 control-label" for="Enviar"></label>
            <div class="col-md-4">
                <div class="input-group"> <span class="input-group-addon">
                        <input type="checkbox">
                    </span>
                    <input id="Enviar" name="Enviar" class="form-control" type="text" placeholder="Enviar E-mail">
                </div>
            </div>
        </div>

        <!-- Textarea -->
        <div class="form-group">
            <label class="col-md-4 control-label" for="Descricao">Descrição</label>
            <div class="col-md-4">
                <textarea class="form-control" id="Descricao" name="Descricao"></textarea>
            </div>
        </div>

        <!-- Multiple Radios -->
        <div class="form-group">
            <label class="col-md-4 control-label" for="Status">Status</label>
            <div class="col-md-4">
                <div class="radio">
                    <label for="Status-0">
                        <input type="radio" name="Status" id="Status-0" value="1" checked="checked">
                        Iniciada </label>
                </div>
                <div class="radio">
                    <label for="Status-1">
                        <input type="radio" name="Status" id="Status-1" value="2">
                        Finalizada </label>
                </div>
                <div class="radio">
                    <label for="Status-2">
                        <input type="radio" name="Status" id="Status-2" value="3">
                        Cancelada </label>
                </div>
            </div>
        </div>

        <!-- Button -->
        <div class="form-group">
            <label class="col-md-4 control-label" for="FinalizarTarefa"></label>
            <div class="col-md-4">
                <button id="FinalizarTarefa" name="FinalizarTarefa" class="btn btn-info">Finalizar Tarefa</button>
            </div>
        </div>
    </fieldset>
</form>

  • 1

    Hello @Renan, the solution was excellent, thanks for the help, thanks even.

1

Add the Html5 attribute as below:

$('#id').attr('disabled','disabled');

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.