I have a ul
with 3 li
‘s each one contains a checkbox and a its label (Woocommerce shipping methods). How I can set display:none
the li
‘s without the checked checkbox?
Here is the html where in the specific example I want to hide everything than free_shipping li:
<ul id="shipping_method" class="woocommerce-shipping-methods">
<li style="
">
<div class="porto-radio ">
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate8" value="flat_rate:8" class="shipping_method porto-control-input">
<label class="porto-control-label text-capitalize font-weight-normal" for="shipping_method_0_flat_rate8">Flat rate 5:
<span class="woocommerce-Price-amount amount">
<bdi>
<span class="woocommerce-Price-currencySymbol">€</span>5,00
</bdi>
</span>
</label>
</div>
</li>
<li>
<div class="porto-radio ">
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate9" value="flat_rate:9" class="shipping_method porto-control-input">
<label class="porto-control-label text-capitalize font-weight-normal" for="shipping_method_0_flat_rate9">Flat rate 10:
<span class="woocommerce-Price-amount amount">
<bdi>
<span class="woocommerce-Price-currencySymbol">€</span>10,00
</bdi>
</span>
</label>
</div>
</li>
<li>
<div class="porto-radio ">
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_free_shipping10" value="free_shipping:10" class="shipping_method porto-control-input" checked="checked">
<label class="porto-control-label text-capitalize font-weight-normal" for="shipping_method_0_free_shipping10">Free shipping</label>
</div>
</li>
</ul>
2
Answers
You can use jQuery to achieve this.
li
and add CSS to it.You can use
filter
to all radio insideli
and hide if is not checked.