javascript - 在 JavaScript 中禁用最近的下拉菜单

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() 获取对第二个下拉列表的引用。

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

Here是一个工作示例。

使用 css 类进行 jQuery 选择是可以的，因为您可以在父容器中查找相对于当前项目具有特定类的项目。因此，当您克隆一个新元素时，父元素的上下文将有所不同(该克隆副本的外部容器)