在依赖于复选框的表单中添加/删除输入

Question

我有一个带有 3 个复选框的表单，每个复选框下都有一个文本区域。

HTML：

<form>
<input class="checkbox" id="checkboxsection1" type="checkbox" name="section1">Section 1<br/>
<textarea name="section1textarea"> Sample </textarea><br/>

 <input class="checkbox" id="checkboxsection2" type="checkbox" name="section2">Section 2<br/>
     <textarea name="section2textarea"> Sample </textarea><br/>

 <input class="checkbox" id="checkboxsection3" type="checkbox" name="section3">Section 3<br/>
     <textarea name="section3textarea"> Sample </textarea><br/>

 <input type="submit" class="submit" value="Submit"/>

JSfiddle

我现在拥有代码的方式是，当未选中复选框时，文本区域是隐藏的，而当使用 jqueryUI 切换功能选中复选框时，文本区域是可见的。

我正在使用的代码比上面更复杂（为了这个问题，我已经简化了它），但在我的情况下，我无法删除 textarea，因为我有画布元素和调用它并依赖它的 javascript用于输入。如果需要更多信息，我将为上面的代码增加更多复杂性。

提交表单后，所有内容都会传递到购物车。我想知道如果文本区域上方的上述复选框仍未选中，是否有任何方法可以防止将文本区域传递到购物车，而实际上没有删除文本区域。

Answer 1

根据this question's accepted answer，禁用的字段不会被发布。

您可以通过调用禁用文本区域：

$('textarea[name=section1textarea]').prop('disabled', true);

并通过调用重新启用它：

$('textarea[name=section1textarea]').prop('disabled', false);

更新

我只想补充一点，复选框值在被选中时会被发布，所以当相应的复选框未被选中时，我会忽略发布的 textarea 值，而不会打扰禁用 textarea。或者两者都只是为了安全。