enable/disable some checkbox when I select a input="radio"

Question

I want to enable/disable some checkbox when I select a input="radio", reading this post seems easy, but is not working because is not doing nothing, they always still disabled. What I'm failing?

$("#radio_ruta").on('click', function() {
  if ($('#radio_ruta').is(':checked')) {
    $(".filtros_mapa").removeAttr("disabled");
  } else {
    $('.filtros_mapa').checkboxradio('disabled');
    //$(".filtros_mapa").attr("disabled", true);
    //$(".filtros_mapa").prop("disabled", true);
  }
});

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


<div class="container-fluid">
  <div class="row" id="map_section">
    <div class="col-2 input" 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">
      <label for="radio_ruta">Ruta</label>
      <input type="radio" name="radio_select" class="filtros_mapa" id="radio_ruta">

      <legend>Filtro datos: </legend>
      <label for="checkbox-1">Todos</label>
      <input type="checkbox" name="checkbox-1" class="filtros_mapa filtros_mapa_ruta" id="checkbox-1" disabled>
      <label for="checkbox-2">tracker 1</label>
      <input type="checkbox" name="checkbox-2" class="filtros_mapa filtros_mapa_ruta" id="checkbox-2" disabled>
      <label for="checkbox-3">tracker 2</label>
      <input type="checkbox" name="checkbox-3" class="filtros_mapa filtros_mapa_ruta" id="checkbox-3" disabled>
      <label for="checkbox-4">tracker 3</label>
      <input type="checkbox" name="checkbox-4" class="filtros_mapa filtros_mapa_ruta" 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>

    <!-- MAPA-->
    <div class="col-7" id="issMap">
    </div>
    <!-- INFORMACIÓN -->
    <div class="col-3" id="info">
    </div>
  </div>
</div>

I see you're using the .checkboxradio method which comes from jQuery UI, are you sure you've linked the library script? — Jazzpaths, Jan 25 '20 at 19:33
Well, it's strange as it seems to works in the snippet, when I run it checkboxes are disabled and as I click on Ruta they become enabled. What's exactly the problem? — Jazzpaths, Jan 25 '20 at 19:39
So, if here is working and on your program not, it's for sure something related to the rest of the program we can't access here. — Jazzpaths, Jan 25 '20 at 19:51

Bilel · Answer 1 · 2020-01-25T20:03:58.867

[UPDATE] You are using disabled as a property in your code. The same should be done while adding or removing it using prop("disabled", true);

Then your code is making a selection only at the first button. When we click on the other button, logically nothing would happen. So instead we select both radio buttons and follow with our condition.

Notice that I removed the class filtros_mapa from Radio buttons... because it's disabling those buttons too so you wouldn't be able to toggle. (Unless you want to do it once and for all)

$('input[type=radio]').change(function() {
  if ($('#radio_ruta').is(':checked')) {
    $(".filtros_mapa").prop("disabled", true);
  } else {
    $('.filtros_mapa').prop("disabled", false);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="row" id="map_section">
    <div class="col-2 input" id="filter_container">
      <!-- FILTROS-->
      <legend>Filtros mapa: </legend>
      <label for="radio_ult_pos">Última posición</label>
      <input type="radio" name="radio_select" class="" id="radio_ult_pos">
      <label for="radio_ruta">Ruta</label>
      <input type="radio" name="radio_select" class="" id="radio_ruta">

      <legend>Filtro datos: </legend>
      <label for="checkbox-1">Todos</label>
      <input type="checkbox" name="checkbox-1" class="filtros_mapa filtros_mapa_ruta" id="checkbox-1" disabled>
      <label for="checkbox-2">tracker 1</label>
      <input type="checkbox" name="checkbox-2" class="filtros_mapa filtros_mapa_ruta" id="checkbox-2" disabled>
      <label for="checkbox-3">tracker 2</label>
      <input type="checkbox" name="checkbox-3" class="filtros_mapa filtros_mapa_ruta" id="checkbox-3" disabled>
      <label for="checkbox-4">tracker 3</label>
      <input type="checkbox" name="checkbox-4" class="filtros_mapa filtros_mapa_ruta" 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>

    <!-- MAPA-->
    <div class="col-7" id="issMap">
    </div>
    <!-- INFORMACIÓN -->
    <div class="col-3" id="info">
    </div>
  </div>
</div>

It should be working now ! I used your code in a rush :) You are using the same class also for Radio buttons and selecting only one button... — Bilel, Jan 25 '20 at 19:56

score -1 · Accepted Answer · answered Jan 25 '20 at 20:00

I'm using the jquery UI widget called checkboxradio. For enable and disable I have to use their own methods.

$( ".selector" ).checkboxradio( "enable" );
$( ".selector" ).checkboxradio( "disable" );

It would look like this:

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

Thank you every body!!

enable/disable some checkbox when I select a input="radio"

2 Answers2