Click and block inputs function

Question

Good morning!! I come again to ask questions... I need to know how I do so that when I click a button, it will be able to block(disabled) all inputs or selects that I want, basically, maybe *ngIf can do this, but I don’t know how yet... Follow button and select code:

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

Answer 1

Think about creating a javascript function to determine what btn has to do

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

Answer 2

A simple Javascript solves the problem!

Extra the 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 advantage over jQuery that causes performance loss.

Sometimes, all you want is just a library resource, but instead, you have a lot of shelves ahead of you and you end up spending some time looking for what you really want.

To disable by 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>
<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>

Answer 3

You can do it using a class. I named it after .erro, ai when you click on btn all fields that have the class .error become 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>
<div class="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>