jquery - 提交表单时如何禁用必需的属性

Question

我是新手，所以答案可能很明显，如果是，请道歉。

我创建了添加新客户的表单。进入新用户的人首先需要检查客户是公司还是个人，以便切换不同的字段来完成。我正在使用 Bootstrap 开发表单并包含required针对特定字段的属性。当我提交表单时，没有任何反应，并且我收到一条错误消息，指出名称 ='user-firstname' 的无效表单控件不可聚焦。. 该字段具有required属性并且被隐藏。我猜这是导致问题的原因。

我试图删除该required属性，但正在努力引用正确的元素。以下是我的部分代码：

<div class="container hidden-form">
        <form class="needs-validation">
            <div class="form-row">
                <div class="col">
                    <div class="form-group">
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="user-type" id="radio-company" value="Company" checked>
                            <label class="form-check-label" for="radio-company">Company</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="user-type" id="radio-individual" value="Individual">
                            <label class="form-check-label" for="radio-individual">Individual</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-row">
                <div class="col">
                    <div class="form-group company-field">
                        <label for="user-companyname">Company Name*</label>
                        <input type="text" class="form-control" id="user-companyname" name="user-companyname" required>
                    </div>
                </div>
            </div>
            <div class="form-row">
                <div class="col">
                    <div class="form-group individual-field hidden-field">
                        <label for="user-firstname">First Name*</label>
                        <input type="text" class="form-control required-entry" id="user-firstname" name="user-firstname" required>
                    </div>
                </div>
                <div class="col">
                    <div class="form-group individual-field hidden-field">
                        <label for="user-surname">Surname</label>
                        <input type="text" class="form-control" id="user-surname" name="user-surname">
                    </div>
                </div>
            </div>
      </form>
</div>

我的 Jquery 代码是：

$("#radio-company").click(function() {
    $(".individual-field.required-entry").removeAttr("required");
    $(".company-field").removeClass("hidden-field");
    $(".individual-field").addClass("hidden-field");            
});

我知道一个答案是为公司或个人提供单独的表格，但这似乎可能会使表格的维护翻倍，并且还意味着如果一个人单击单选按钮来更改用户类型，他们将需要重新-再次输入所有信息，因为将显示一个新表格。

非常感谢任何帮助。

标签： jquerybootstrap-4