Click function and block inputs

Question

Click function and block inputs

Navigation

#1 by (2 votes)
#2 by (2 votes)
#3 by (1 votes)

1

Good morning !! I need to know how I do when I click a button, it will be able to block (disabled) all the inputs or selects I want, basically, maybe * ngIf can do this, but not I know how it's yet Here is the code for the button and select:

<div class="col-md-3">
   <label>Forma de Pagamento:</label>
   <select class="form-control" formControlName="forma">
      <option selected>Selecione...</option>
      <option *ngFor="let pgmtt of pgmt" value="{{pgmtt.Codigo}}">{{pgmtt.Codigo}} - {{pgmtt.Nome}}</option>
   </select>
</div>

---------------------------------------------------------------------------------------

 <!-- botão -->
 <button type="button" class="btn btn-info" >Incluir
    <i class="glyphicon glyphicon-plus"></i>
 </button>

html angular

asked by anonymous 19.06.2018 / 15:26

3 answers

2

Think of creating a function in javascript to determine what btn has to do

$("#btnteste").click(function()
 {
   $("#id").val("#id").prop( "disabled", true );
 }

19.06.2018 / 15:42

1

You can do this using a class . I have given the name of .erro , then when you click on btn all fields that have the .erro class are disabled

$(document).ready(function() {
    $(".btn").on("click", function() {
        $(".erro").prop("disabled", true);
    })
});

      <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><divclass="col-md-3">
  <label>Forma de Pagamento:</label>
  <select class="form-control erro" formControlName="forma">
     <option selected>Selecione...</option>
     <option *ngFor="let pgmtt of pgmt" value="{{pgmtt.Codigo}}">{{pgmtt.Codigo}} - {{pgmtt.Nome}}</option>
  </select>
  <input type="text" class="erro">
  <textarea name="" id="" cols="30" rows="10" class="erro"></textarea>
</div>

<!-- botão -->
<button type="button" class="btn btn-info" >Incluir
   <i class="glyphicon glyphicon-plus"></i>
</button>

19.06.2018 / 15:57

How to do an UPDATE using data from two different tables? Paragraph count

score 2 · Accepted Answer

A simple Javascript solves the problem!

Extra enable function

function desabilitar() {
    document.getElementById("qqId").disabled=true;
}

function habilitar() {
    document.getElementById("qqId").disabled=false;
}

<div class="col-md-3">
   <label>Forma de Pagamento:</label>
   <select class="form-control" formControlName="forma" id="qqId">
      <option selected>Selecione...</option>
      <option *ngFor="let pgmtt of pgmt" value="{{pgmtt.Codigo}}">{{pgmtt.Codigo}} - {{pgmtt.Nome}}</option>
   </select>
</div>

<button type="button" class="btn btn-info" onclick="desabilitar()">Desabilitar
    <i class="glyphicon glyphicon-plus"></i>
 </button>
 
 <button type="button" class="btn btn-info" onclick="habilitar()">Habilitar
    <i class="glyphicon glyphicon-plus"></i>
 </button>

For this simple code it is worth mentioning that the use of pure javascript has an advantage over jQuery that causes loss of performance.

Sometimes all you want is just a feature of the library, but instead you have several shelves ahead of you and you end up wasting some time looking for what you really want.

To disable clicking select

$(document).ready(function(){
    
    $(document).on('click', '.form-control',function() {
       $(".form-control").prop("disabled", true);
    });    
                     
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="col-md-3">
   <label>Forma de Pagamento:</label>
   <select class="form-control" formControlName="forma">
      <option selected>Selecione...</option>
      <option *ngFor="let pgmtt of pgmt" value="{{pgmtt.Codigo}}">{{pgmtt.Codigo}} - {{pgmtt.Nome}}</option>
   </select>
</div>