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

Question

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

* 如果选择“Filter off” {“Filter on”、“date”、“status”和“from/to/desc”将被取消选中； “date”、“status”和“from/to/desc”复选框及其输入文本框将被禁用}

* 如果选择“过滤开启”{“过滤关闭”将被取消选中； “日期”、“状态”和“从/到/desc”复选框将被启用；
** 如果“日期”被选中 { 2 日期文本框将被启用 };如果未选中“日期”{日期文本框将被禁用}
** 如果“状态”被选中 { 状态下拉将被启用 };如果未选中“状态”{状态文本框将被禁用}
** 如果选中“from/to/desc” { from/to/desc textbox = enabled };如果未选中“from/to/desc” { from/to/desc textbox = disabled } }
另外，点击提交后，我们如何在文本框中保留选中的状态和项目/如果有的话。
注意：我们可以检查所有日期，状态，从/到/desc复选框
我已经更新了问题和代码（脚本），其中一些是 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>

Answer 1

您可以使用 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" />

JS

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

这是一个小提琴：https://jsfiddle.net/zfo7ezx8/1/