當我選擇 input="radio" 時啟用/禁用某些復選框

Question

我想在選擇input="radio"時啟用/禁用某些checkbox ，閱讀這篇文章似乎很容易，但不起作用，因為沒有做任何事情，它們總是被禁用。 我失敗了什么？

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

[更新] 您在代碼中使用了 disabled 作為屬性。 使用 prop("disabled", true) 添加或刪除它時也應該這樣做。

然后您的代碼僅在第一個按鈕處進行選擇。 當我們點擊另一個按鈕時，邏輯上什么都不會發生。 因此，我們選擇兩個單選按鈕並按照我們的條件進行操作。

請注意，我從單選按鈕中刪除了類 filtros_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>

Answer 2

我正在使用名為checkboxradio的jquery UI小部件。 對於啟用和禁用我必須使用自己的方法。

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

謝謝大家！！