Javascript 基于单选按钮禁用/启用复选框组

这是一个搜索页面
如何应用这些：

*如果选择“过滤关闭”{“过滤打开”、“日期”、“状态”和“从/到/描述”将被取消选中；“日期”、“状态”和“从/到/描述”复选框及其输入文本框将被禁用}

*如果选择“过滤打开”{“过滤关闭”将被取消选中；“日期”、“状态”和“从/到/描述”复选框将被启用；
**如果选中“日期”{2日期文本框将被启用}；如果未选中“日期”{日期文本框将被禁用}
**如果选中“状态”{将启用状态下拉列表}；如果未选中“状态”{将禁用状态文本框}
**如果勾选了“from/to/desc”{from/to/desc textbox=enabled}；如果未勾选“from/to/desc”{from/to/desc textbox=disabled}
此外，单击“提交”后，我们如何在文本框/选择框（如果有）中保持选中状态和项目。
注意：我们可以选中所有日期、状态、从/到/描述复选框
我已经更新了问题和代码（脚本），其中一些是由Nisarg建议的

提前谢谢

<form><input type="radio" name="filtering" id="filteringOff" value=0 checked="checked" class="rbFilter">Filter OFF: Show ALL<br>
<input type="radio" name="filtering" id="filteringOn" value=1 class="rbFilter">Filter ON:
<div id="filterOnControls">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="checkbox" name="filteron_2" id="filteron_2" value=2>&nbsp;Date between (YYYY-MM-DD):&nbsp;
    <input type="text" name="datef" id="datef" style="width:80px" autocomplete="off" disabled="disabled">&nbsp;to:&nbsp;
    <input type="text" name="datet" id="datet" style="width:80pxpx" autocomplete="off" disabled="disabled">
    <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="checkbox" name="filteron_3" id="filteron_3" value=3>&nbsp;Status:&nbsp;
    <select name = "status" id = "status" >
    <option value="paid" selected="selected">Paid</option>
    <option value="not yet">Not yet</option>
    </select>
    <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="checkbox" name="filteron_4" id="filteron_4" value=4>&nbsp;From/To/Description contains:&nbsp;
    <input type="text" name="desc" id="desc" style="width:150px" autocomplete="off" disabled="disabled">
    <br>
</div></form>

过滤关闭：全部显示

筛选：
日期介于（YYYY-MM-DD）之间：
致：


地位：
支付
还没有


From/To/Description包含：

---

您可以使用jQuery的on change事件监听器来实现这一点。在您的HTML中，我更新了两个单选按钮的ID以区分它们，并添加了一个类来侦听它们的更改事件。另外，我在

控件上的
filter=ON上包装了一个
div
。这使我可以使用父div禁用/启用所有它们

HTML
这里有一把小提琴：
嗨，尼萨格，谢谢你的回复。它起作用了！！然而，后来，我意识到我还需要别的东西——你能看看更新的问题吗？非常感谢。您可以扩展观察变化事件的相同想法。现在需要为复选框编写更改事件处理程序，并根据复选框的选中/未选中状态，启用/禁用文本框。在谷歌的语法帮助下，你可以自己做。
<form action="" method="post" style="line-height: 2em;">
  <input type="radio" name="filtering" id="filteringOff" value=0 checked="checked" class="rbFilter">Filter OFF: Show ALL
  <br>
  <input type="radio" name="filtering" id="filteringON" value=1 class="rbFilter">Filter ON:

  <div id="filterOnControls">
    <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="checkbox" name="filteron" id="filteron" value=2>&nbsp;Date between (YYYY-MM-DD):&nbsp;
    <input name="datef" type="text" id="datef" style="width:80px" autocomplete="off" disabled="disabled">&nbsp;to:&nbsp;
    <input name="datet" type="text" id="datet" style="width:80pxpx" autocomplete="off" disabled="disabled">
    <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="checkbox" name="filteron" id="filteron" value=3>&nbsp;Status:&nbsp;
    <input name="status" id="status" type="text" style="width:150px" autocomplete="off" disabled="disabled">
    <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="checkbox" name="filteron" id="filteron" value=4>&nbsp;From/To/Description contains:&nbsp;
    <input name="desc" id="desc" type="text" style="width:150px" autocomplete="off" disabled="disabled">
    <br>
    <br>


  </div>

  <input type="submit" value="submit" name="submit" />

$(".rbFilter").on("change", function() {
  $("#filterOnControls").find("input").prop("disabled", !$("#filteringON").prop('checked'));
});