Question

我正在尝试定位内容，并隐藏整个输入字段或专门禁用字段"Pickup in Store : $0.00"。

我只能隐藏单选按钮，而不能隐藏单选按钮旁边的文本。我知道标签是全局容器，但是我可以看到输入字段具有唯一的ID。有没有办法可以做到这一点例如CSS，Javascript还是Jquery？

<div class="shopping-basket-shipping-methods" data-shopping-basket-id="35838">
      <label class="user-form-field-label">
      <input class="shopping-basket-shipping-method" data-cart-id="411539" data-shopping-basket-id="35838" id="shopping_baskets_attributes_35838_shipping_method_id_932" name="shopping_baskets_attributes[35838][shipping_method_id]" type="radio" value="932">
          Canada Post - Ground : $20.00
      </label><br>
      <label class="user-form-field-label">
       <input checked="checked" class="shopping-basket-shipping-method" data-cart-id="411539" data-shopping-basket-id="35838" id="shopping_baskets_attributes_35838_shipping_method_id_915" name="shopping_baskets_attributes[35838][shipping_method_id]" type="radio" value="915">
      <p>Pickup in Store : $0.00</p>

      </label><br>
</div>

Answer 1

我个人看到三个选项；

将两个元素包装在一个div中，然后将它们一起定位（最直的方向）
也定位到先前的兄弟姐妹（使用CSS并不困难）
为标签分配一个具有描述性和动态性的id，以便于定位（可能需要做一些额外的工作）

Answer 2

您不应使用label元素来包装单选框和文本。

class Factory {
    public MyClass createDefault() {
        return new MyClass(new ConcreteDependency());
    }
}

如果您想将某些文本与输入字段相关联，则可以简单地将label元素添加为输入元素的同级元素，并将它们与<div class="form-control"> <label for="option1">Option 1 description</label> <input type="radio" name="shopping" id="option1" value="option1"> </div> <div class="form-control"> <label for="option2">Option 2 description</label> <input type="radio" name="shopping" id="option2" value="option2"> </div>属性相关联，该属性与输入的id匹配，从而使html结构更扎实的是，您还可以使用额外的类或为form-controls div添加一个ID，以使其更易于选择；如果您已经在使用jQuery，则可以将这些元素作为父对象，例如for

Answer 3

无需隐藏所有label，只需考虑输入ID即可隐藏其内容：

#shopping_baskets_attributes_35838_shipping_method_id_915,
#shopping_baskets_attributes_35838_shipping_method_id_915 + *{
  display:none;
}

<div class="shopping-basket-shipping-methods" data-shopping-basket-id="35838">
      <label class="user-form-field-label">
      <input class="shopping-basket-shipping-method" data-cart-id="411539" data-shopping-basket-id="35838" id="shopping_baskets_attributes_35838_shipping_method_id_932" name="shopping_baskets_attributes[35838][shipping_method_id]" type="radio" value="932">
          Canada Post - Ground : $20.00
      </label><br>
      <label class="user-form-field-label">
       <input checked="checked" class="shopping-basket-shipping-method" data-cart-id="411539" data-shopping-basket-id="35838" id="shopping_baskets_attributes_35838_shipping_method_id_915" name="shopping_baskets_attributes[35838][shipping_method_id]" type="radio" value="915">
      <p>Pickup in Store : $0.00</p>

      </label><br>
</div>

如何隐藏或删除输入字段之外的内容？

3 个答案: