Почему входные данные никогда не меняют атрибут отключен?

Question

Я хочу включить / отключить input type="number", но он никогда не меняется.

Он запускается disabled, и когда я нажимаю input type="radio", я хочу включить его.

<input type="number" class="form-control filtros_mapa_ruta" id="n_nodes_ruta" value="2" min="1" disabled>

Я вижу, что у многих людей есть эта проблема, и они обычно пытаются с $('input').attr("disabled", true);, но тоже терпят неудачу.

Функция jQuery, использующая .prop("disabled", true):

$("#radio_ult_pos").on('click', function() {
    if ($('#radio_ult_pos').is(':checked')) {
        $( ".filtros_mapa_ruta" ).checkboxradio( "disable" );
        $('#n_nodes_ruta').prop("disabled", true);
    }
});
$("#radio_ruta").on('click', function() {
    if ($('#radio_ruta').is(':checked')) {
        $( ".filtros_mapa_ruta" ).checkboxradio( "enable" );
        $('#n_nodes_ruta').prop("disabled", false);
    }
});

Фрагмент (флажок здесь не работает, потому что я использую jQuery виджет пользовательского интерфейса, но они хорошо работают в моем коде):

function checkboxController() {
  $("#radio_ult_pos").on('click', function() {
    if ($('#radio_ult_pos').is(':checked')) {
      $(".filtros_mapa_ruta").checkboxradio("disable");
      $('#n_nodes_ruta').prop("disabled", true);
    }
  });
  $("#radio_ruta").on('click', function() {
    if ($('#radio_ruta').is(':checked')) {
      $(".filtros_mapa_ruta").checkboxradio("enable");
      $('#n_nodes_ruta').prop("disabled", false);
    }
  });
}

$(document).ready(function() {
  checkboxController();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="col-2" id="filter_container">
  <!-- FILTROS-->
  <legend>Filtros mapa: </legend>
  <label for="radio_ult_pos">Última posición</label>
  <input type="radio" name="radio_select" class="filtros_mapa" id="radio_ult_pos" checked>
  <label for="radio_ruta">Ruta</label>
  <input type="radio" name="radio_select" class="filtros_mapa" id="radio_ruta">

  <legend id="legend_filtro_datos">Filtros datos: </legend>
  <label for="checkbox-2">Goat tracker 1</label>
  <input type="checkbox" name="GOAT_TRACKER1" class="filtros_mapa filtros_mapa_ruta filtros_mapa_ruta_checkb optionNodeFilter" id="checkbox-2" disabled>
  <label for="checkbox-3">Goat tracker 2</label>
  <input type="checkbox" name="GOAT_TRACKER2" class="filtros_mapa filtros_mapa_ruta filtros_mapa_ruta_checkb optionNodeFilter" id="checkbox-3" disabled>
  <label for="checkbox-4">Goat tracker 3</label>
  <input type="checkbox" name="GOAT_TRACKER3" class="filtros_mapa filtros_mapa_ruta filtros_mapa_ruta_checkb optionNodeFilter" id="checkbox-4" disabled>

  <input type="number" class="form-control filtros_mapa_ruta" id="n_nodes_ruta" value="2" min="1" disabled>
  <button type="button" class="btn btn-success" id="filtrar_btn_map">Filtrar</button>
</div>

Я пытался с $('#n_nodes_ruta').removeAttr("disabled"), но он тоже не работает ...

Почему никогда не изменять атрибут отключен?

Answer 1

Вы можете просто использовать .attr('disabled', 'disabled'), чтобы отключить его, и .removeAttr('disabled'), чтобы включить его.

Answer 2

Как @ Hereti c Обезьяна сказала, что проблема была в функции jQuery checkboxradio.

Да, она была определена, но проблема заключалась в том, что класс filtros_mapa_ruta имеет input и это сделало его неудачным.

Решением было назвать правильный класс, только с флажком.

$(".filtros_mapa_ruta_checkb" ).checkboxradio( "disable");

Спасибо

Answer 3

В JS вы можете установить прослушиватель событий в контейнере div, и если переключатели нажимаются, вы можете установить для свойства disabled на входе значение true или false.

const input = document.getElementById("n_nodes_ruta");

function checkboxController() {

  document.querySelector('.col-2').addEventListener('click', () => {
    if(event.target.id === "radio_ult_pos") {
      input.disabled = true;
    }
    else if(event.target.id === "radio_ruta") {
      input.disabled = false;
    }

  })

}

$(document).ready(function() {
  checkboxController();
});