Question

我希望用户能够使用.pizza下拉菜单选择披萨类型，然后启用旁边的.pizzaSize菜单。我不能使用类选择器，因为稍后将克隆表单。这是我到目前为止所做的：

HTML：

<div id="1" class="pizzaForm">
    <fieldset>
        <form class="pure-form">
        <legend>Pizza</legend>
        <label><b>Pizza Type: &nbsp;</b></label>
        <select class="pizza">
            <option>Please Select:</option></option>
            <option name="margarita">Margarita</option>
            <option name="deep-pan">Deep Pan</option>
            <option name="stuffed-crust">Stuffed Crust</option>
        </select>
            <span style="float:right">
            <label><b>Pizza Size: &nbsp;</b></label>
            <select class="pizzaSize" disabled>
                <option data-price="0">Please Select:</option></option>
                <option name="e-small" data-price="4.99">Extra Small - £4.99</option>
                <option name="small" data-price="5.99">Small - £5.99</option>
                <option name="medium" data-price="6.99">Medium - £6.99</option>
                <option name="large" data-price="8.99">Large - £8.99</option>
                <option name="e-large" data-price="9.99">Extra Large - £9.99</option>
                <option name="f-size" data-price="10.99">Family Size - £10.99</option>
            </select>
            </span>
        </form>
    </fieldset>
    <fieldset style = "border-top:0px">
    <form class="pure-form">
        <legend><b>Toppings (99p Each): &nbsp;</b></legend>
        <input type="checkbox" name="onions" disabled>Onions</input>
        <input type="checkbox" name="mushrooms" disabled>Mushrooms</input>
        <input type="checkbox" name="peppers" disabled>Peppers</input>
        <input type="checkbox" name="olives" disabled>Olives</input>
        <input type="checkbox" name="garlic" disabled> Garlic</input>
        <input type="checkbox" name="peperoni" disabled>Peperoni</input>
        <input type="checkbox" name="cheese" disabled>Pesto</input>
    </form>
    </fieldset>
    <h2> £0.00 </h2>
    <button class="removePizza">Remove Pizza</button>
    <br>
</div>

JS：

$(document).on("change",".pizza", function() {
     $(this).closest('.pizzaSize').prop('disabled', false);
});

Answer 1

您应该使用closest()方法获取对外部容器div（使用css类pizzaForm）元素的引用，并使用find()来获取对第二个下拉列表的引用。< / p>

$(document).on("change",".pizza", function() {
     $(this).closest('.pizzaForm').find('.pizzaSize').prop('disabled', false);
});

Here是一个工作样本。

使用css类进行jQuery选择很好，因为您在父容器中找到具有相对于当前项的特定类的项。因此，当您克隆新元素时，父元素的上下文将是不同的（该克隆副本的外部容器）

禁用JavaScript中最近的下拉菜单

1 个答案: