Allow editing of input

Question

When selecting the form of payment, the default rate is filled in, but this rate must allow editing it.

I need to maintain the structure of my function, but at the same time allow the rate to be changed.

$(document).ready(function() {

  $(".moeda").maskMoney({decimal: ",",thousands: "."});

  $('#valorCurso, #formaPagamento, #formaTaxas, #poloComissao').bind('focusout change', function() {

    var formaID = $("#formaPagamento option:selected").val();
    var formaTxt = $("#formaPagamento option:selected").text();
    var formaTaxa = $("#formaPagamento option:selected").attr('data-taxa');
    var formaTipo = $("#formaPagamento option:selected").attr('data-tipo');


    if (formaID == "") {
      var taxas = $("#formaTaxas").val("0.00");
    } else {
      var taxas = $("#formaTaxas").val(formaTaxa + formaTipo);
    }



  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-maskmoney/3.0.2/jquery.maskMoney.min.js"></script>

Forma de pagamento:
<select id="formaPagamento" name="formaPagamento" required>
  <option value="" selected></option>
  <option value="1" data-taxa="3.50" data-tipo="">Boleto</option>
  <option value="2" data-taxa="3.50" data-tipo="%">Cartão credito</option>
  <option value="3" data-taxa="1.50" data-tipo="%">Cartão debito</option>
  <option value="4" data-taxa="0.00" data-tipo="">Dinheiro</option>
</select>

Taxa: 
<input id="formaTaxas" name="formaTaxas" type="text" class="form-control moeda" value="0,00" required/>

Answer 1

Create another Event Handler with the event input only to the countryside #formaTaxas. Changing the field value will also change the attribute value data-taxa active option in select:

$('#formaTaxas').bind('input', function() {
   $("#formaPagamento option:selected").attr("data-taxa", this.value);
});

See in operation:

$(document).ready(function() {

   $(".moeda").maskMoney({decimal: ",",thousands: "."});

   $('#formaTaxas').bind('keyup', function() {
      $("#formaPagamento option:selected").attr("data-taxa", this.value);
   });
   
   $('#valorCurso, #formaPagamento, #formaTaxas, #poloComissao').bind('focusout change', function() {
   
      var formaID = $("#formaPagamento option:selected").val();
      var formaTxt = $("#formaPagamento option:selected").text();
      var formaTaxa = $("#formaPagamento option:selected").attr('data-taxa');
      var formaTipo = $("#formaPagamento option:selected").attr('data-tipo');
   
      if (formaID == "") {
         var taxas = $("#formaTaxas").val("0.00");
      } else {
         var taxas = $("#formaTaxas").val(formaTaxa + formaTipo);
      }
   });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-maskmoney/3.0.2/jquery.maskMoney.min.js"></script>
Forma de pagamento:
<select id="formaPagamento" name="formaPagamento" required>
  <option value="" selected></option>
  <option value="1" data-taxa="3.50" data-tipo="">Boleto</option>
  <option value="2" data-taxa="3.50" data-tipo="%">Cartão credito</option>
  <option value="3" data-taxa="1.50" data-tipo="%">Cartão debito</option>
  <option value="4" data-taxa="0.00" data-tipo="">Dinheiro</option>
</select>

Taxa: 
<input id="formaTaxas" name="formaTaxas" type="text" class="form-control moeda" value="0,00" required/>