基于下拉选择启用/禁用输入（jQuery）

Question

我的网站每行有两个输入和一个下拉菜单。
要正确解释。

我得到了输入：“开始”和“结束”来设置我的商店的营业时间，还有一个下拉菜单来选择当天是“完全关闭”还是“24 小时营业”。这是一周中的每一天。

根据下拉菜单的选择，我想禁用输入字段。因此，如果我选择“关闭”，则“开始”和“结束”这两个字段将被禁用，但仅适用于一天而不是所有天。

我的尝试
我设法根据选择禁用和启用所有“开始”/“结束”输入。

JS：

<script>
$(document).ready(function() {
    var $dropdown = $('.dropdown_time'),
    $time = $('.timepicker');
    $dropdown.change(function() {
    if ($dropdown.val() != '1') {
        $time.removeAttr('disabled');
    } else {
        $time.attr('disabled', 'disabled').val('');
    }
    }).trigger('change'); // added trigger to calculate initial state
});
</script>  

HTML（精简为“两天”：

<div class="row">
    <label for="store_tuesday" class="right inline">Dienstag:</label>
    <input type="text" class="timepicker" placeholder="Von">
    <input type="text" class="timepicker" placeholder="Bis">
    <select name="store_opening_tuesday" id='customDropdown' class='medium dropdown_time'>
        <option value="1">Ruhetag</option>
        <option value="2">24 Std.</option>
        <option value="3" selected="selected">-</option>
    </select>   
</div>
<div class="row">
    <label for="store_wednesday" class="right inline">Mittwoch:</label>
    <input type="text" class="timepicker" placeholder="Von">
    <input type="text" class="timepicker" placeholder="Bis">
    <select name="store_opening_wednesday" id='customDropdown' class='medium dropdown_time'>
        <option value="1">Ruhetag</option>
        <option value="2">24 Std.</option>
        <option value="3" selected="selected">-</option>
    </select>   
</div>  

目标：
每行的下拉菜单应仅禁用/启用“他”行中的输入，而不是其他行。这可能吗？

Answer 1

您需要单独配置每一行。使用您的代码会是这样：

<script>
    $(document).ready(function() {
        $('.row').each(function(){
            var $dropdown = $(this).find('.dropdown_time'),
            $time = $(this).find('.timepicker');
            $dropdown.change(function() {
                if ($dropdown.val() != '1') {
                    $time.removeAttr('disabled');
                } else {
                    $time.attr('disabled', 'disabled').val('');
                }
            }).trigger('change'); // added trigger to calculate initial state
        });
    });
</script>