(Решено) Как скрыть значение, основанное на CheckBox, включается Обязательно при проверке (включена выпадающая версия) - PullRequest
Новая
       70

(Решено) Как скрыть значение, основанное на CheckBox, включается Обязательно при проверке (включена выпадающая версия)

1 голос
/ 03 марта 2020

I wi sh для отображения текстовых областей, когда установлен флажок, и скрытия их, если это не так. Интерфейс может быть запущен, но флажок не активируется. 

$(document).ready(function() {
  $('#ifbroken').change(function() {
    if (this.checked)
      $('#dvchk').fadeIn('slow');
    else
      $('#dvchk').fadeOut('slow');
  })
});
#dvchk {
  display: none
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
</script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<div class="input-field col s12">
  <input type="checkbox" id="ifbroken">
  <label for="ifborken">If Broken</label>
</div>

<div class="input-field col s12" id="dvchk">
  <label for="Problem">Problem</label></br>
  </br>
  <textarea name="Problem" style="width:600px; height:200px;"></textarea>
</div>

<div class="input-field col s12" id="dvchk">
  <label for="ActionTaken">Action Taken</label></br>
  </br>
  <textarea name="ActionTaken" style="width:600px; height:200px;"></textarea>
</div>

<div class="input-field col s12" id="dvchk">
  <label for="BuyOff">Buy Off</label></br>
  </br>
  <textarea name="BuyOff" style="width:600px; height:200px;"></textarea>
</div>

Ответы [ 2 ]

5 голосов
/ 03 марта 2020

У вас есть несколько идентичных идентификаторов и недействительные HTML и слишком много jQuery загруженных файлов

Это работает

Я изменил идентификаторы на класс, исправил опечатку в метке и неверно </br>

Я также переместил встроенный стиль в таблицу стилей 

function toggleField() {
  $fld = $(".dvchk").find(":input").prop("required", this.checked);

  if (this.checked) $('.dvchk').fadeIn('slow'); // there is alas no fadeToggle(boolean)
  else $('.dvchk').fadeOut('slow');
}
$(function() {
  $('#ifbroken').on("click", toggleField)
});
.dvchk {
  display: none
}

textarea {
  width: 600px;
  height: 200px;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<form>
  <div class="input-field col s12">
    <input type="checkbox" id="ifbroken">
    <label for="ifbroken">If Broken</label>
  </div>

  <div class="input-field col s12 dvchk">
    <label for="Problem">Problem</label><br /><br />
    <textarea name="Problem"></textarea>
  </div>

  <div class="input-field col s12 dvchk">
    <label for="ActionTaken">Action Taken</label><br /><br />
    <textarea name="ActionTaken"></textarea>
  </div>

  <div class="input-field col s12 dvchk">
    <label for="BuyOff">Buy Off</label><br /><br />
    <textarea name="BuyOff"></textarea>
  </div>
  <input class="dvchk" type="submit" />
</form>
0 голосов
/ 11 марта 2020

Основываясь на ответе @mplungjan, я также разработал версию Drop Box!

JavaScript Функция: 

function toggleField() {
  $fld = $(".dvchk").find(":input").prop("required", this.value =='Yes');

  if (this.value == 'Yes') $('.dvchk').fadeIn('slow'); // there is alas no 
  fadeToggle(boolean)
  else $('.dvchk').fadeOut('slow');
 }
$(function() {
  $('#ifbroken').change(toggleField)
});

HTML Drop-Box: 

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<div class="input-field col s12">
 <label for="IfBroken">If Broken</label></br></br>
  <select name="IfBroken" id="ifbroken" required> 
   <option value="">Choose</option> 
   <option value="Yes">Yes</option>
   <option value="No">No</option>
  </select> 
</div>
...