Question

我在页面上有以下HTML的几个实例：

<div class="input radio optional">
  <label class="collection_radio" for="warranty_selected_environments_attributes_1__destroy_false">
    <input checked="checked" class="radio optional" id="warranty_selected_environments_attributes_1__destroy_false" name="warranty[selected_environments_attributes][1][_destroy]" type="radio" value="false" />Yes
  </label>
  <label class="collection_radio" for="warranty_selected_environments_attributes_1__destroy_true">
    <input checked="checked" class="radio optional" id="warranty_selected_environments_attributes_1__destroy_true" name="warranty[selected_environments_attributes][1][_destroy]" type="radio" value="true" />No
  </label>
</div>

<div class="input numeric integer required">
  <label class="integer required" for="warranty_selected_environments_attributes_1_distance">Distance</label>
  <input class="numeric integer required" id="warranty_selected_environments_attributes_1_distance" name="warranty[selected_environments_attributes][1][distance]" required="required" size="50" step="1" type="number" />
</div>

此代码是使用simple_form gem生成的，因此我对它没有太多控制权。它也是一个嵌套的属性形式，因此系统中的每个“环境”都有上述代码集之一。我希望能够显示和隐藏文本输入“距离”，具体取决于无线电组是真还是假。

我一直试图找出一种方法来观看一个广播组，然后知道页面上哪个“距离”框要隐藏或显示。在这个阶段我能想到的最好的是使用名称值，去除最后[_destroy]部分并添加[距离]。值得注意的是，所有上述内容都包含在列出的每个环境中。

为冗长的HTML道歉：）

Answer 1

哇，比我想象的容易。 jquery中的方便的nearest（）方法使这很容易：

$(":radio").change(function () {
    $(this).closest('.section').children('.input.numeric').toggle(this.checked && this.value == 'false');
});

使用单选按钮使用jquery动态显示和隐藏div

1 个答案: