включить / отключить некоторые флажки, когда я выбираю вход = "радио"

Question

Я хочу включить / отключить некоторые checkbox, когда я выбираю input="radio", чтение этой записи кажется легким, но не работает, потому что ничего не делает, они всегда по-прежнему отключены. Что я терплю неудачу?

$("#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>

Answer 1

Я использую виджет jquery UI с именем checkboxradio. Для включения и отключения я должен использовать свои собственные методы .

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

Это будет выглядеть так:

$("#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" );
    }
});

Спасибо всем телам !!

Answer 2

[ОБНОВЛЕНИЕ] Вы используете отключено как свойство в вашем коде. То же самое должно быть сделано при добавлении или удалении, используя prop («disabled», true);

Тогда ваш код делает выбор только по первой кнопке. Когда мы нажимаем на другую кнопку, логически ничего не произойдет. Поэтому вместо этого мы выбираем обе радиокнопки и следуем нашему условию.

Обратите внимание, что я удалил класс фильтрос_mapa из радиокнопок ... потому что он тоже отключает эти кнопки, чтобы вы не могли переключаться. (Если вы не хотите сделать это раз и навсегда)

$('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>