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>

根据下拉选择启用/禁用输入（jQuery）

1 个答案: