Why the input never change the disabled attribute?

Question

I want to enable/disable an input type="number" but it never changes.

It starts disabled and when I press a input type="radio" I want to enable it.

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

I see a lot of people have this problem and they usually try with $('input').attr("disabled", true); but is failing too.

The jQuery function, using .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);
    }
});

Snippet (the checkbox here is not working because I'm using a jQuery UI widget, but they're working well in my code):

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>

I tried with $('#n_nodes_ruta').removeAttr("disabled") but is not working too...

Why never change the attribute disabled?

Have you seen https://stackoverflow.com/questions/1414365/disable-enable-an-input-with-jquery — Addis, Jan 26 '20 at 17:17
Yes, that is why I'm saying that a lot of people have this problem and why I'm using `prop()` and `attr()`, but are not working — Lleims, Jan 26 '20 at 17:19
could js be a solution for you, or you want to go with jquery? — Addis, Jan 26 '20 at 17:22
The jQuery function `checkboxradio` is not defined, which is causing an error in you snippet. Do you have similar errors in your real code? — Heretic Monkey, Jan 26 '20 at 19:42
With those two lines commented out, the `prop` code works fine. — Heretic Monkey, Jan 26 '20 at 19:44
yes, the problem is the `jquery UI` widget... I don't know why crashes — Lleims, Jan 26 '20 at 19:55

score 0 · Answer 1 · answered Jan 26 '20 at 17:42

In JS, you can set an event listener on the container div and if the radio buttons are clicked, you can set the disabled property on the input to true or 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();
});

score 0 · Answer 2 · answered Jan 26 '20 at 20:22

As @Heretic Monkey said the problem was the jQuery function checkboxradio.

Yes, it was defined, but the problem was that the class filtros_mapa_ruta has the input as well, and that made him fail.

The solution was to call the right class, only with the checkbox.

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

Thank you

score -1 · Answer 3 · answered Jan 26 '20 at 19:26

-1

you can simply use .attr('disabled', 'disabled') to make it disabled and .removeAttr('disabled') to enable it.

answered Jan 26 '20 at 19:26

Ehsan feyzolahi

73
4

jQuery’s documentation recommends using `prop` for binary attributes. – Heretic Monkey Jan 26 '20 at 19:36

Why the input never change the disabled attribute?

3 Answers3