How to enable and disable fields when clicking button

Navigation
8

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

I'm trying to use this, but to no avail: 


$(document).READY(function() {

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

});

The form is this: 

<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>

    
asked by anonymous 01.04.2015 / 20:10

3 answers

6

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

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/>

Following is 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>Entrecomosdados:<inputtype="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>
    
01.04.2015 / 21:14
4

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 setDisabled(true) to disable 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><linkrel='stylesheet'href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'/><formclass="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>
    
01.04.2015 / 21:16
1

Add the html5 attribute as below: 

$('#id').attr('disabled','disabled');
    
14.04.2018 / 03:30
What are the advantages of using a Generator (yield) in PHP? Is it ideal to build forms using table or div?