Jump to content
  • разработка интернет магазинов на opencart
  • доработка интернет магазинов на opencart

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


 Share

Recommended Posts

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

 

            <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>

 

Link to comment
Share on other sites


<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>

 

  • +1 1
Link to comment
Share on other sites

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'])

спасипотому что огромное!!!

Edited by mulka45
Link to comment
Share on other sites


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']?>, только подскажите куда))

Edited by mulka45
Link to comment
Share on other sites


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

 

измените 

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

на

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

Link to comment
Share on other sites

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

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

 

измените 

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

на

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

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

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

Link to comment
Share on other sites


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

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

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

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

Link to comment
Share on other sites

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

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


 

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

Link to comment
Share on other sites

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

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

 

измените 

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

на

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

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

ик не бугдет рилиить?

Link to comment
Share on other sites


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

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

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

Link to comment
Share on other sites

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

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

 

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

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

Link to comment
Share on other sites


<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>

 

Link to comment
Share on other sites

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>

 

 

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

Link to comment
Share on other sites


ик он корректно рилииет
только обрилитлик на 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)
		}
});
});

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.