Disable/enable group of checkbox based on radio button

Question

This is a search page.
How to apply these:

* If "Filter off" is chosen { "Filter on", "date", "status" and "from/to/desc" will be unchecked; "date", "status" and "from/to/desc" checkbox, along with their input text boxes will be disabled }

* If "Filter on" is chosen { "Filter off" will be unchecked; "date", "status" and "from/to/desc" checkbox will be enabled;
** If "date" is checked { 2 date textbox will be enabled }; if "date" is not checked { date text box will be disabled }
** If "status" is checked { status dropdown will be enabled }; if "status" is not checked { status textbox will be disabled }
** If "from/to/desc" is checked { from/to/desc textbox = enabled }; if "from/to/desc" is not checked { from/to/desc textbox = disabled } }
Additionally, after click submit, how can we keep the checked status and items in the textbox/select if any.
Note: we can check all the date, status, from/to/desc checkbox
I have updated the questions and the code(script), some of them are as suggested by Nisarg.

Thanks in advance!

<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

You can do this using jQuery's on change event listener. In your HTML I have updated the ID of the two radio buttons to tell them apart, and added a class to listen to their change events. Also, I have wrapped a div around the filter = ON controls. This lets me disable/enable all of them using the parent 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'));
});

Here's a fiddle for this: https://jsfiddle.net/zfo7ezx8/1/