javascript - 选中复选框时如何禁用 HTML 必需属性？

Question

我有这个现有的功能:复选框默认选中，当复选框未选中时，它将显示 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 部分内。因此，如果默认情况下选中了复选框并且禁用了必需的属性(我的问题)，我可以继续。

Answer 1

更简单的方法，使用 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>