Disable/enable group of checkbox based on radio button

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, along with their input text boxes will be enabled }

Note: we can check all the date, status from/to/from checkbox
Thanks in advance!

After submit, the sql query result will appear based on selected items

<form action="" method="post" style="line-height: 2em;">
<input type="radio" name="filtering" id="filtering" value=0 checked="checked">Filter OFF: Show ALL<br>

<input type="radio" name="filtering" id="filtering" value=1>Filter ON:<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>

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