Почему мой переключатель bootstrap не изменяется, когда установлена ​​функция на JS? - PullRequest
Новая
       8

Почему мой переключатель bootstrap не изменяется, когда установлена ​​функция на JS?

0 голосов
/ 14 января 2020

Я хочу включить или выключить переключатель в зависимости от того, что было установлено в JS. В этом случае я установил Inactive в JS, так как мой HTML использует значение Active / Inactive, когда модальное окно закрыто. Как показано в примере, мой выпадающий список работает хорошо, он меняет значение на Стандартное, когда модальное окно закрыто.

enter image description here

HTML 

<div class="form-group row">
    <label class="col-md-4">Status Device</label>
    <div class="col-md-8">
        <label class="switch">
            <input type="checkbox" id="toggle_pump">
            <div class="slider round">
                <span class="on" name="add_device_status" id="add_device_status" value="Active" autocomplete="off">ON</span>
                <span class="off" name="add_device_status" id="add_device_status" value="Inactive" autocomplete="off">OFF</span>
            </div>
        </label>
    </div>
</div>
<div class="form-group row">
    <label class="col-md-4">Device Rule</label>
    <div class="col-md-8">
        <div class="form-group">
            <select id="add_device_rule" class="custom-select form-control">
                <option value="std_pckg">Standard Package</option>
                <option value="vip_pckg">VIP Package</option>
            </select>
        </div>
    </div>
</div>

JS

$("#add_new_device_modal").on('hidden.bs.modal', function(e) {
    $('#add_device_status').val("Inactive");
    $('#add_device_rule').val("std_pckg");
});

Ответы [ 2 ]

1 голос
/ 14 января 2020

https://jsfiddle.net/w0aqvg5m/

используйте свойство selected для включения скрытого модального события

$('#toggle_pump').prop('checked',true)

0 голосов
/ 14 января 2020

Это потому, что вы объявили 2 идентификатора с тем же именем в этой части. 

<div class="slider round">
<span class="on" name="add_device_status" id="add_device_status" 
value="Active" autocomplete="off">ON</span>
<span class="off" name="add_device_status" id="add_device_status" 
value="Inactive" autocomplete="off">OFF</span>
</div>

Измените его на - 

<div class="slider round">
<span class="off" name="add_device_status" id="add_device_status" 
value="Active" autocomplete="off">ON</span>
</div>

JS - 

$("#add_new_device_modal").on('hidden.bs.modal', function(e) {
$('#add_device_status').val("Inactive");
$('#add_device_status').innerHTML = "OFF";
$('#add_device_rule').val("std_pckg");
});
...