我有这个现有的功能:复选框默认选中,当复选框未选中时,它将显示 ul
部分
function toggle(className, obj) {
var $input = $(obj);
if ($input.prop('checked'))
$(className).hide();
else $(className).show();
}
<input type="checkbox" id="cb_ship" onclick="toggle('.ship', this)" checked="checked">
<label for="cb_ship" >Same as account name</label>
<form method="post">
<ul class="ship" style="display:none;">
<li> fname <input type="text" name="fname" required></li>
<li> lname <input type="text" name="lname" required></li>
<li> age <input type="text" name="age" required></li>
<li> address <input type="text" name="address" required></li>
<li> city <input type="text" name="city" required></li>
</ul>
<input type="submit" value="send">
</form>
我想做什么:如果该复选框默认选中,则应禁用所有必需的属性,无需单击该复选框。所以,我可以提交表格。
已编辑:很抱歉造成混淆。我更新了我的问题。提交按钮不得在 ul
部分内。因此,如果默认情况下选中了复选框并且禁用了必需的属性(我的问题),我可以继续。
最佳答案
更简单的方法,使用 jquery toggle
- 注意我没有使用 onclick
- 保持 js 和 html 分开
更新:在需要时将required
关闭,js 将添加它
更新 2:保持 required
开启,并按照 op 所说的那样查看复选框的状态
var el = $('.ship');
if ($('#cb_ship').is(":checked")) {
el.find('input').prop({
required: false
});
}
$('#cb_ship').on('change', function() {
el.toggle();
if (el.is(":visible") == true) {
el.find('input').prop({
required: true
});
} else {
el.find('input').prop({
required: false
});
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="checkbox" id="cb_ship" checked="checked">
<label for="cb_ship" >Same as account name</label>
<form method="post">
<ul class="ship" style="display:none;">
<li> fname <input type="text" name="fname" required></li>
<li> lname <input type="text" name="lname" required></li>
<li> age <input type="text" name="age" required></li>
<li> address <input type="text" name="address" required></li>
<li> city <input type="text" name="city" required></li>
<li> </li>
</ul>
<input type="submit" value="send">
</form>
关于javascript - 选中复选框时如何禁用 HTML 必需属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39342783/