Значение не возвращается после нажатия кнопки переключения в bootstrap 4 - PullRequest
Новая
       4

Значение не возвращается после нажатия кнопки переключения в bootstrap 4

0 голосов
/ 11 февраля 2020

Я использую эту кнопку Toggle . Пользовательский интерфейс работает нормально. Однако у меня есть проблема с jQuery, из-за которой после нажатия кнопки «Отправить» возвращается только первое значение при нажатии переключателя ON. 

    <label class="switch">
        <input id="toggle-event" type="checkbox" data-toggle="toggle">
        <div class="slider round">
            <span class="on" id="test_status" value="Active">ON</span>
            <span class="off" id="test_status" value="Inactive">OFF</span>
        </div>
    </label>
    <button type="button" id="btn_edit_device" class="btn btn-block btn-info">SUBMIT</button>

    $("#btn_edit_device").on("click",function(){

        if ($('input[type="checkbox"]').prop('checked',true)){ 
            status =  $("#test_status").val("Active"); 
            console.log("Active")
        }
        else { 
            status = $("#test_status").val("Inactive"); 
            console.log("Inactive")
        }

    });

1 Ответ

0 голосов
/ 11 февраля 2020

Проблема здесь if ($('input[type="checkbox"]').prop('checked',true)){

Вы должны изменить, чтобы иметь возможность правильно получить значение, как показано ниже. 

if ($('input[type="checkbox"]').prop('checked')){


$("#btn_edit_device").on("click",function(){
        if ($('input[type="checkbox"]').prop('checked')){ 
            status =  $("#test_status").val("Active"); 
            console.log("Active")
        }
        else { 
            status = $("#test_status").val("Inactive"); 
            console.log("Inactive")
        }

    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="switch">
        <input id="toggle-event" type="checkbox" data-toggle="toggle">
        <div class="slider round">
            <span class="on" id="test_status" value="Active">ON</span>
            <span class="off" id="test_status" value="Inactive">OFF</span>
        </div>
    </label>
    <button type="button" id="btn_edit_device" class="btn btn-block btn-info">SUBMIT</button>
...