我希望在选中复选框时显示文本区域,而在未选中时隐藏它们。
该界面可以运行,但是该复选框不可单击。
$(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>
最佳答案
您有多个相同的ID和无效的HTML,以及加载的jQuery文件过多
这有效
我将ID更改为class,修复了标签中的拼写错误和无效的</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>