Question

这是一个搜索页面。
如何申请：

*如果＆＃34;过滤＆＃34;选择{＆＃34;过滤＆＃34;，＆＃34;日期＆＃34;，＆＃34;状态＆＃34;和＆＃34;从/到/ desc＆＃34;将不加制止; ＆＃34; date＆＃34;，＆＃34; status＆＃34;和＆＃34;从/到/ desc＆＃34;复选框及其输入文本框将被禁用}

*如果＆＃34;过滤＆＃34;被选中{＆＃34;过滤＆＃34;将不加制止; ＆＃34; date＆＃34;，＆＃34; status＆＃34;和＆＃34;从/到/ desc＆＃34;复选框将启用;
**如果＆＃34; date＆＃34;已选中{2日期文本框将被启用};如果＆＃34;日期＆＃34;未选中{日期文本框将被禁用}
**如果＆＃34;状态＆＃34;已选中{状态下拉菜单将启用};如果＆＃34;状态＆＃34;未选中{状态文本框将被禁用}
**如果＆＃34; from / to / desc＆＃34;已选中{from / to / desc textbox = enabled}; if＆＃34; from / to / desc＆＃34;未选中{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>

enter image description

Answer 1

您可以在更改事件侦听器上使用jQuery执行此操作。在您的HTML中，我更新了两个单选按钮的ID以区分它们，并添加了一个类来收听他们的更改事件。另外，我在div控件周围包裹了filter = ON。这允许我使用父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/

根据单选按钮

1 个答案:

HTML

JS