Заменить выпадающий список на switch

[mulka45]

Добрый день, помогите пожалуйста, как выпадающий список который делает вкл/выкл заменить на свитч переключатель?

 

            <select name="status" id="input-status-<?=$product['product_id']?>" class="le-value _simple-value le-selector" data-field="status">
              <?php if ($product['status']) { ?>
                <option value="1" selected="selected"><?=$text_enabled?></option>
                <option value="0"><?=$text_disabled?></option>
                <?php } else { ?>
                <option value="1"><?=$text_enabled?></option>
                <option value="0" selected="selected"><?=$text_disabled?></option>
                <?php } ?>
            </select>

 

заменить на переключатель:

<li class="list-group-item">
    <label class="switch ">
        <input type="checkbox" class="success">
        <span class="slider round"></span>
    </label>
</li>

 

[zomo]

switch с бутстрапа 4 или 5 ?

[mulka45]

11 минут назад, zomo сказал:

switch с бутстрапа 4 или 5 ?

4, кастом 

 

https://bootsnipp.com/snippets/GaxR2

Змінено 31 жовтня 2021 користувачем mulka45

[zomo]

<div class="input-group">						
  <div class="custom-control custom-switch">
  <?php if ($product['status']) { ?>
    <input name="status" value="1" class="custom-control-input" type="checkbox" id="switch-status" checked>
    <label class="custom-control-label" for="switch-status"><?php echo $text_enabled; ?></label>
  <?php } else { ?>
    <input name="status" value="0" class="custom-control-input" type="checkbox" id="switch-status">
    <label class="custom-control-label" for="switch-status"><?php echo $text_disabled; ?></label>
  <?php } ?>
  </div>
</div>

 

Как то так ну и код js чтобы при переключении менялось value и надпись включено отключено

 

<script>
var checkbox = document.getElementById('switch-status');

if (checkbox != null) {
	checkbox.addEventListener('change', function() {
		var checkbox_lable = document.querySelector('[for="switch-status"]');
		
		if (this.checked) {	
			this.value='1';
			checkbox_lable.innerText = <?php echo $text_enabled; ?>;
		} else {
			this.value='0';
			checkbox_lable.innerText = <?php echo $text_disabled; ?>;
		}
	})
}
</script>

 

[mulka45]

1 час назад, zomo сказал:

<div class="input-group">						
  <div class="custom-control custom-switch">
  <?php if ($status) { ?>
    <input name="status" value="1" class="custom-control-input" type="checkbox" id="switch-status" checked>
    <label class="custom-control-label" for="switch-status"><?php echo $text_enabled; ?></label>
  <?php } else { ?>
    <input name="status" value="0" class="custom-control-input" type="checkbox" id="switch-status">
    <label class="custom-control-label" for="switch-status"><?php echo $text_disabled; ?></label>
  <?php } ?>
  </div>
</div>

 

Как то так ну и код js чтобы при переключении менялось value и надпись включено отключено

 

<script>
var checkbox = document.getElementById('switch-status');

if (checkbox != null) {
	checkbox.addEventListener('change', function() {
		var checkbox_lable = document.querySelector('[for="switch-status"]');
		
		if (this.checked) {	
			this.value='1';
			checkbox_lable.innerText = <?php echo $text_enabled; ?>;
		} else {
			this.value='0';
			checkbox_lable.innerText = <?php echo $text_disabled; ?>;
		}
	})
}
</script>

 

 

 

спасибо. нашел небольшую проблемку, не хватало ($product['status'])

спасибо огромное!!!

Змінено 31 жовтня 2021 користувачем mulka45

[mulka45]

1 час назад, zomo сказал:

<div class="input-group">						
  <div class="custom-control custom-switch">
  <?php if ($status) { ?>
    <input name="status" value="1" class="custom-control-input" type="checkbox" id="switch-status" checked>
    <label class="custom-control-label" for="switch-status"><?php echo $text_enabled; ?></label>
  <?php } else { ?>
    <input name="status" value="0" class="custom-control-input" type="checkbox" id="switch-status">
    <label class="custom-control-label" for="switch-status"><?php echo $text_disabled; ?></label>
  <?php } ?>
  </div>
</div>

 

Как то так ну и код js чтобы при переключении менялось value и надпись включено отключено

 

<script>
var checkbox = document.getElementById('switch-status');

if (checkbox != null) {
	checkbox.addEventListener('change', function() {
		var checkbox_lable = document.querySelector('[for="switch-status"]');
		
		if (this.checked) {	
			this.value='1';
			checkbox_lable.innerText = <?php echo $text_enabled; ?>;
		} else {
			this.value='0';
			checkbox_lable.innerText = <?php echo $text_disabled; ?>;
		}
	})
}
</script>

 

 

и скрипт как то не правильно отрабатывает. текст при переключении все равно не меняется. и нажимая на любой, переключается только первый. подозреваю что нужно куда то прописать в коде <?=$product['product_id']?>, только подскажите куда))

Змінено 31 жовтня 2021 користувачем mulka45

[zomo]

input со статусов у вас один или их много?

 

измените 

var checkbox = document.getElementById('switch-status');

на

var checkbox = document.getElementById('ID переключателя');

[Tobolskiy]

19 минут назад, zomo сказал:

input со статусов у вас один или их много?

 

измените 

var checkbox = document.getElementById('switch-status');

на

var checkbox = document.getElementById('ID переключателя');

да, это страница где выводятся товары в админке

не помогло. во первых не сохраняется положение переключателя, во вторых не меняется текст "вкл/выкл". что то делаю не так?

[chukcha]

что? нет никаких плагинов?


 

[zomo]

11 минут назад, Tobolskiy сказал:

да, это страница где выводятся товары в админке

не помогло. во первых не сохраняется положение переключателя, во вторых не меняется текст "вкл/выкл". что то делаю не так?

Пришлите доступы в личку посмотрим

[zomo]

Только что, chukcha сказал:

что? нет никаких плагинов?


 

Есть наверное, но а смысл если в бустрапе есть такая функция по молчанию...

[Tobolskiy]

Только что, chukcha сказал:

что? нет никаких плагинов?


 

пытаюсь это сделать уже и так в нештатном модуле)) так что... к сожалению нет

[Tobolskiy]

33 минуты назад, zomo сказал:

input со статусов у вас один или их много?

 

измените 

var checkbox = document.getElementById('switch-status');

на

var checkbox = document.getElementById('ID переключателя');

var checkbox = document.getElementById('switch-status<?=$product['product_id']?>');

так не будет работать?

[zomo]

будет, вы в карточке товара в админки это вообще делаете?

[zomo]

3 минуты назад, Tobolskiy сказал:

пытаюсь это сделать уже и так в нештатном модуле)) так что... к сожалению нет

Пишите в личку, тогда по другому все решается

[Tobolskiy]

11 минут назад, zomo сказал:

будет, вы в карточке товара в админки это вообще делаете?

 

это страница где выводится много товаров в админке.

проверил но не работает)) как то экранировать нужно наверно

[chukcha]

<style>
label.switcher input[type="checkbox"] {display:none}
label.switcher input[type="checkbox"] + span {position:relative;display:inline-block;vertical-align:middle;width:36px;height:17px;margin:0 5px 0 0;background:#ccc;border:solid 1px #999;border-radius:10px;box-shadow:inset 0 1px 2px #999;cursor:pointer;transition:all ease-in-out .2s;}
label.switcher input[type="checkbox"]:checked + span {background:#8fbb6c;border:solid 1px #7da35e;}
label.switcher input[type="checkbox"]:checked + span span {right:0;left:auto}
label.switcher span span{position:absolute;background:white;height:17px;width:17px;display:inlaine-box;left:0;top:-1px;border-radius:50%}
</style>

<label class="switcher" title=""><input value="" type="checkbox"><span><span></span></span></label>

 

[Tobolskiy]

6 минут назад, chukcha сказал:

<style>
label.switcher input[type="checkbox"] {display:none}
label.switcher input[type="checkbox"] + span {position:relative;display:inline-block;vertical-align:middle;width:36px;height:17px;margin:0 5px 0 0;background:#ccc;border:solid 1px #999;border-radius:10px;box-shadow:inset 0 1px 2px #999;cursor:pointer;transition:all ease-in-out .2s;}
label.switcher input[type="checkbox"]:checked + span {background:#8fbb6c;border:solid 1px #7da35e;}
label.switcher input[type="checkbox"]:checked + span span {right:0;left:auto}
label.switcher span span{position:absolute;background:white;height:17px;width:17px;display:inlaine-box;left:0;top:-1px;border-radius:50%}
</style>

<label class="switcher" title=""><input value="" type="checkbox"><span><span></span></span></label>

 

 

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

[chukcha]

так он корректно работает
только обработчик на onchange

$('label.switcher input[type=checkbox]').change(function(){
	var elem = $(this);
	$.ajax({
		url:'',
		method:'POST',
		data:[],
		success:function(html){
			elem.closest('label').attr('title',html)
		}
});
});