Сброс слайд-кнопки с опцией выбора - PullRequest
Новая
       1

Сброс слайд-кнопки с опцией выбора

2 голосов
/ 25 января 2020

Как мне сбросить мою кнопку в положение ДА (зеленый цвет), если я выбираю или меняю опцию? Мой код jquery не работает. В настоящее время стиль моей кнопки исчезает. Я не думаю, что решение очень сложное, но у меня недостаточно знаний для решения этой проблемы. Спасибо!

введите описание изображения здесь

введите описание изображения здесь 

    $('#select').on('change', function(e) {
      $('#button').toggleClass('onoff');
      e.preventDefault();
    });
.onoff {
  margin-left: -27px;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
  position: relative;
  cursor: pointer;
  width: 55px;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.onoff label {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 240%;
  height: 100%;
  cursor: pointer;
  background: #900;
  border-radius: 5px;
  font-weight: normal; 
  color: #FFF;
  -webkit-transition: background 0.3s, text-indent 0.3s;
  -moz-transition: background 0.3s, text-indent 0.3s;
  -o-transition: background 0.3s, text-indent 0.3s;
  transition: background 0.3s, text-indent 0.3s;
  text-indent: 27px;
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
}
.onoff label:after {
  content: 'NO';
  display: block;
  position: absolute;
  top: 0px;
  left: 14px;
  width: 100%;
  font-size: 12px; 
  color: #FFF;
 
  z-index: 1;
}
.onoff label:before {
  content: ''; 
  width: 15px;
  height: 24px;
  border-radius: 3px;
  background: #FFF; 
  position: absolute;
  z-index: 2;
  top: 3px;
  left: 3px;
  display: block;
  -webkit-transition: left 0.3s;
  -moz-transition: left 0.3s;
  -o-transition: left 0.3s;
  transition: left 0.3s;
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
}
.onoff input:checked + label {
  background: #378b2c; 
  text-indent: 8px;
}
.onoff input:checked + label:after {
  content: 'YES';
  color: #FFF; 
  left: 14px;
  font-size: 14px; 
}
.onoff input:checked + label:before {
  left: 114px;
}
input[type=checkbox], input[type=radio] {
    vertical-align: middle;
    position: relative;
    bottom: -5px;
}
input[type=radio] {
    bottom: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="button" class="onoff" style="margin-left:100px">
<input type="checkbox" id="tool_closed_onoff" name="tool_closed_onoff" style="width:20px; height:20px;" />
<label for="tool_closed_onoff" /></label>
</div>

<br /><br />

<div id="select" style="margin-left:100px">
<select>
  <option value="No option" selected="selected">No option</option>
  <option value="option1">option1</option>
  <option value="option2">option2</option>
  <option value="option3">option3</option>
  <option value="option4">option4</option>
</select>
</div>

Ответы [ 2 ]

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

У вас есть оператор if / else, поскольку вы будете включать / выключать его, если перейдете с варианта 2/3 (что, если я понял) приведет к неправильному переключению на yes

см. Демонстрацию 

$('select').on('change', function(e) {

  if ($(this).val() === 'No option') {
    $("#tool_closed_onoff").prop('checked', false);
  } else {
    $("#tool_closed_onoff").prop('checked', true);
  }
});
.onoff {
  margin-left: -27px;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
  position: relative;
  cursor: pointer;
  width: 55px;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.onoff label {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 240%;
  height: 100%;
  cursor: pointer;
  background: #900;
  border-radius: 5px;
  font-weight: normal;
  color: #FFF;
  -webkit-transition: background 0.3s, text-indent 0.3s;
  -moz-transition: background 0.3s, text-indent 0.3s;
  -o-transition: background 0.3s, text-indent 0.3s;
  transition: background 0.3s, text-indent 0.3s;
  text-indent: 27px;
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
}

.onoff label:after {
  content: 'NO';
  display: block;
  position: absolute;
  top: 0px;
  left: 14px;
  width: 100%;
  font-size: 12px;
  color: #FFF;
  z-index: 1;
}

.onoff label:before {
  content: '';
  width: 15px;
  height: 24px;
  border-radius: 3px;
  background: #FFF;
  position: absolute;
  z-index: 2;
  top: 3px;
  left: 3px;
  display: block;
  -webkit-transition: left 0.3s;
  -moz-transition: left 0.3s;
  -o-transition: left 0.3s;
  transition: left 0.3s;
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
}

.onoff input:checked+label {
  background: #378b2c;
  text-indent: 8px;
}

.onoff input:checked+label:after {
  content: 'YES';
  color: #FFF;
  left: 14px;
  font-size: 14px;
}

.onoff input:checked+label:before {
  left: 114px;
}

input[type=checkbox],
input[type=radio] {
  vertical-align: middle;
  position: relative;
  bottom: -5px;
}

input[type=radio] {
  bottom: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="button" class="onoff" style="margin-left:100px">
  <input type="checkbox" id="tool_closed_onoff" name="tool_closed_onoff" style="width:20px; height:20px;" />
  <label for="tool_closed_onoff" />
</div>

<br /><br />

<div id="select" style="margin-left:100px">
  <select>
    <option value="No option" selected="selected">No option</option>
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
    <option value="option4">option4</option>
  </select>
</div>
0 голосов
/ 25 января 2020

Вам просто нужно установить проверенное свойство input на true 

$('#select').on('change', function(e) {
      $('#tool_closed_onoff').prop('checked',true);
      e.preventDefault();
    });
.onoff {
  margin-left: -27px;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
  position: relative;
  cursor: pointer;
  width: 55px;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.onoff label {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 240%;
  height: 100%;
  cursor: pointer;
  background: #900;
  border-radius: 5px;
  font-weight: normal; 
  color: #FFF;
  -webkit-transition: background 0.3s, text-indent 0.3s;
  -moz-transition: background 0.3s, text-indent 0.3s;
  -o-transition: background 0.3s, text-indent 0.3s;
  transition: background 0.3s, text-indent 0.3s;
  text-indent: 27px;
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
}
.onoff label:after {
  content: 'NO';
  display: block;
  position: absolute;
  top: 0px;
  left: 14px;
  width: 100%;
  font-size: 12px; 
  color: #FFF;
 
  z-index: 1;
}
.onoff label:before {
  content: ''; 
  width: 15px;
  height: 24px;
  border-radius: 3px;
  background: #FFF; 
  position: absolute;
  z-index: 2;
  top: 3px;
  left: 3px;
  display: block;
  -webkit-transition: left 0.3s;
  -moz-transition: left 0.3s;
  -o-transition: left 0.3s;
  transition: left 0.3s;
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
}
.onoff input:checked + label {
  background: #378b2c; 
  text-indent: 8px;
}
.onoff input:checked + label:after {
  content: 'YES';
  color: #FFF; 
  left: 14px;
  font-size: 14px; 
}
.onoff input:checked + label:before {
  left: 114px;
}
input[type=checkbox], input[type=radio] {
    vertical-align: middle;
    position: relative;
    bottom: -5px;
}
input[type=radio] {
    bottom: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="button" class="onoff" style="margin-left:100px">
<input type="checkbox" id="tool_closed_onoff" name="tool_closed_onoff" style="width:20px; height:20px;" />
<label for="tool_closed_onoff" /></label>
</div>

<br /><br />

<div id="select" style="margin-left:100px">
<select>
  <option value="No option" selected="selected">No option</option>
  <option value="option1">option1</option>
  <option value="option2">option2</option>
  <option value="option3">option3</option>
  <option value="option4">option4</option>
</select>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...