时间戳

首页 > 解决方案 > 如何在 jquery 中仅选择启用的复选框？

javascript - 如何在 jquery 中仅选择启用的复选框？

问题描述

我有 2 组checkboxes（将一组视为“主复选框”，另一组作为“子复选框”）由 PHP 动态创建，并从数据库中获取数据。

当页面加载时，“子复选框”默认是禁用的，只有当相应的主复选框被选中时才会启用。

例如 - “星期一，星期二...星期五”将是“主要复选框”。

"9:00 AM -10:00 AM", "10:00 AM -11:00 AM", "11:00 AM -12:00 PM", "12:00 PM -01:00 PM"将是“子复选框”。

每当检查一个“子复选框”之一时，还应检查其相关的一个工作日的复选框，但仅必须检查已启用的复选框。

我在 JSFiddle https://jsfiddle.net/Anji12/xdo0fzvc/15/中添加了演示

正在接受检查，checkboxes但即使是残疾人也被检查。如何不检查禁用checkboxes？

我尝试使用下面的代码，但它不起作用。

if ($(this).is(":checked")){
    if(!$("." + selectedSlot).is('[disabled]')){
        $("." + selectedSlot).prop("checked", false);
    }else{
        $("." + selectedSlot).prop("checked", true);
    }
} else {
    $("." + selectedSlot).prop("checked", false);
}         

<div class="container">
    <div class="row">
        <div class="col-3">
            <input type='checkbox' class="day" data-day="1" name="day[]" value="1" /> Monday
        </div>
        <div class="col-9">
            <label class="form-check-label py-1">
                <input class="slot selectedSlot1 weekday1" data-slot_time="1" type="checkbox" name="slot_from[]"  value='1' > 9:00 AM -10:00 AM
            </label>
            <label class="form-check-label py-1">
                <input class="slot selectedSlot2 weekday1" data-slot_time="2" type="checkbox" name="slot_from[]"  value='2' > 10:00 AM -11:00 AM
            </label>
            <label class="form-check-label py-3">
                <input class="slot selectedSlot3 weekday1" data-slot_time="3" type="checkbox" name="slot_from[]"  value='3' > 11:00 AM -12:00 PM
            </label>
            <label class="form-check-label py-3">
                <input class="slot selectedSlot4 weekday1" data-slot_time="4" type="checkbox" name="slot_from[]"  value='4' > 12:00 PM -01:00 PM
            </label>
        </div>
    </div>
    <div class="row">
        <div class="col-3">
            <input type='checkbox' class="day" data-day="2" name="day[]" value="2" /> Tuesday
        </div>
        <div class="col-9">
            <label class="form-check-label py-1">
                <input class="slot selectedSlot1 weekday2" data-slot_time="1" type="checkbox" name="slot_from[]"  value='1' > 9:00 AM -10:00 AM
            </label>
            <label class="form-check-label py-1">
                <input class="slot selectedSlot2 weekday2" data-slot_time="2" type="checkbox" name="slot_from[]"  value='2' > 10:00 AM -11:00 AM
            </label>
            <label class="form-check-label py-3">
                <input class="slot selectedSlot3 weekday2" data-slot_time="3" type="checkbox" name="slot_from[]"  value='3' > 11:00 AM -12:00 PM
            </label>
            <label class="form-check-label py-3">
                <input class="slot selectedSlot4 weekday2" data-slot_time="4" type="checkbox" name="slot_from[]"  value='4' > 12:00 PM -01:00 PM
            </label>
        </div>
    </div>
    <div class="row">
        <div class="col-3">
            <input type='checkbox' class="day" data-day="3" name="day[]" value="3" /> Wednesday
        </div>
        <div class="col-9">
            <label class="form-check-label py-1">
                <input class="slot selectedSlot1 weekday3" data-slot_time="1" type="checkbox" name="slot_from[]"  value='1' > 9:00 AM -10:00 AM
            </label>
            <label class="form-check-label py-1">
                <input class="slot selectedSlot2 weekday3" data-slot_time="2" type="checkbox" name="slot_from[]"  value='2' > 10:00 AM -11:00 AM
            </label>
            <label class="form-check-label py-3">
                <input class="slot selectedSlot3 weekday3" data-slot_time="3" type="checkbox" name="slot_from[]"  value='3' > 11:00 AM -12:00 PM
            </label>
            <label class="form-check-label py-3">
                <input class="slot selectedSlot4 weekday3" data-slot_time="4" type="checkbox" name="slot_from[]"  value='4' > 12:00 PM -01:00 PM
            </label>
        </div>
    </div>
    <div class="row">
        <div class="col-3">
            <input type='checkbox' class="day" data-day="4" name="day[]" value="4" /> Thursday
        </div>
        <div class="col-9">
            <label class="form-check-label py-1">
                <input class="slot selectedSlot1 weekday4" data-slot_time="1" type="checkbox" name="slot_from[]"  value='1' > 9:00 AM -10:00 AM
            </label>
            <label class="form-check-label py-1">
                <input class="slot selectedSlot2 weekday4" data-slot_time="2" type="checkbox" name="slot_from[]"  value='2' > 10:00 AM -11:00 AM
            </label>
            <label class="form-check-label py-3">
                <input class="slot selectedSlot3 weekday4" data-slot_time="3" type="checkbox" name="slot_from[]"  value='3' > 11:00 AM -12:00 PM
            </label>
            <label class="form-check-label py-3">
                <input class="slot selectedSlot4 weekday4" data-slot_time="4" type="checkbox" name="slot_from[]"  value='4' > 12:00 PM -01:00 PM
            </label>
        </div>
    </div>
    <div class="row">
        <div class="col-3">
            <input type='checkbox' class="day" data-day="5" name="day[]" value="5" /> Friday
        </div>
        <div class="col-9">
            <label class="form-check-label py-1">
                <input class="slot selectedSlot1 weekday5" data-slot_time="1" type="checkbox" name="slot_from[]"  value='1' > 9:00 AM -10:00 AM
            </label>
            <label class="form-check-label py-1">
                <input class="slot selectedSlot2 weekday5" data-slot_time="2" type="checkbox" name="slot_from[]"  value='2' > 10:00 AM -11:00 AM
            </label>
            <label class="form-check-label py-3">
                <input class="slot selectedSlot3 weekday5" data-slot_time="3" type="checkbox" name="slot_from[]"  value='3' > 11:00 AM -12:00 PM
            </label>
            <label class="form-check-label py-3">
                <input class="slot selectedSlot4 weekday5" data-slot_time="4" type="checkbox" name="slot_from[]"  value='4' > 12:00 PM -01:00 PM
            </label>
        </div>
    </div>
</div>

标签： javascriptjquery

解决方案

您需要检查所有属性checkboxes并检查disabled属性，然后决定是否添加checked道具。

 $("." + selectedSlot).each((e, el) => {
             var maininput = $(el).is('[disabled]')
             if (!maininput)
                   $(el).prop("checked", true);
                })

工作样本：https ://jsfiddle.net/7tbLvk1r/

试试这个：

$(".slot").prop("disabled", true);
        $(".day").click(function () {
            let day = $(this).data('day');
            let dd = "weekday" + day
            if ($(this).is(":checked")) {
                $("." + dd).prop("disabled", false);
            } else {
                $("." + dd).prop("disabled", true);
                $("." + dd).prop("checked", false);
            }
        });

        $(".slot").click(function () {
            let slot = $(this).data('slot_time');
            let selectedSlot = "selectedSlot" + slot;

            if ($(this).is(":checked")) {
                $("." + selectedSlot).each((e, el) => {
                    var maininput = $(el).is('[disabled]')
                    if (!maininput)
                        $(el).prop("checked", true);
                })
            } else {
                $("." + selectedSlot).prop("checked", false);
            }
        });
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>

<div class="container">
        <div class="row">
            <div class="col-3">
                <input type='checkbox' class="day" data-day="1" name="day[]" value="1" /> Monday
            </div>
            <div class="col-9">
                <label class="form-check-label py-1">
                    <input class="slot selectedSlot1 weekday1" data-slot_time="1" type="checkbox" name="slot_from[]" value='1'> 9:00 AM -10:00 AM
                </label>
                <label class="form-check-label py-1">
                    <input class="slot selectedSlot2 weekday1" data-slot_time="2" type="checkbox" name="slot_from[]" value='2'> 10:00 AM -11:00 AM
                </label>
                <label class="form-check-label py-3">
                    <input class="slot selectedSlot3 weekday1" data-slot_time="3" type="checkbox" name="slot_from[]" value='3'> 11:00 AM -12:00 PM
                </label>
                <label class="form-check-label py-3">
                    <input class="slot selectedSlot4 weekday1" data-slot_time="4" type="checkbox" name="slot_from[]" value='4'> 12:00 PM -01:00 PM
                </label>
            </div>
        </div>
        <div class="row">
            <div class="col-3">
                <input type='checkbox' class="day" data-day="2" name="day[]" value="2" /> Tuesday
            </div>
            <div class="col-9">
                <label class="form-check-label py-1">
                    <input class="slot selectedSlot1 weekday2" data-slot_time="1" type="checkbox" name="slot_from[]" value='1'> 9:00 AM -10:00 AM
                </label>
                <label class="form-check-label py-1">
                    <input class="slot selectedSlot2 weekday2" data-slot_time="2" type="checkbox" name="slot_from[]" value='2'> 10:00 AM -11:00 AM
                </label>
                <label class="form-check-label py-3">
                    <input class="slot selectedSlot3 weekday2" data-slot_time="3" type="checkbox" name="slot_from[]" value='3'> 11:00 AM -12:00 PM
                </label>
                <label class="form-check-label py-3">
                    <input class="slot selectedSlot4 weekday2" data-slot_time="4" type="checkbox" name="slot_from[]" value='4'> 12:00 PM -01:00 PM
                </label>
            </div>
        </div>
        <div class="row">
            <div class="col-3">
                <input type='checkbox' class="day" data-day="3" name="day[]" value="3" /> Wednesday
            </div>
            <div class="col-9">
                <label class="form-check-label py-1">
                    <input class="slot selectedSlot1 weekday3" data-slot_time="1" type="checkbox" name="slot_from[]" value='1'> 9:00 AM -10:00 AM
                </label>
                <label class="form-check-label py-1">
                    <input class="slot selectedSlot2 weekday3" data-slot_time="2" type="checkbox" name="slot_from[]" value='2'> 10:00 AM -11:00 AM
                </label>
                <label class="form-check-label py-3">
                    <input class="slot selectedSlot3 weekday3" data-slot_time="3" type="checkbox" name="slot_from[]" value='3'> 11:00 AM -12:00 PM
                </label>
                <label class="form-check-label py-3">
                    <input class="slot selectedSlot4 weekday3" data-slot_time="4" type="checkbox" name="slot_from[]" value='4'> 12:00 PM -01:00 PM
                </label>
            </div>
        </div>
        <div class="row">
            <div class="col-3">
                <input type='checkbox' class="day" data-day="4" name="day[]" value="4" /> Thursday
            </div>
            <div class="col-9">
                <label class="form-check-label py-1">
                    <input class="slot selectedSlot1 weekday4" data-slot_time="1" type="checkbox" name="slot_from[]" value='1'> 9:00 AM -10:00 AM
                </label>
                <label class="form-check-label py-1">
                    <input class="slot selectedSlot2 weekday4" data-slot_time="2" type="checkbox" name="slot_from[]" value='2'> 10:00 AM -11:00 AM
                </label>
                <label class="form-check-label py-3">
                    <input class="slot selectedSlot3 weekday4" data-slot_time="3" type="checkbox" name="slot_from[]" value='3'> 11:00 AM -12:00 PM
                </label>
                <label class="form-check-label py-3">
                    <input class="slot selectedSlot4 weekday4" data-slot_time="4" type="checkbox" name="slot_from[]" value='4'> 12:00 PM -01:00 PM
                </label>
            </div>
        </div>
        <div class="row">
            <div class="col-3">
                <input type='checkbox' class="day" data-day="5" name="day[]" value="5" /> Friday
            </div>
            <div class="col-9">
                <label class="form-check-label py-1">
                    <input class="slot selectedSlot1 weekday5" data-slot_time="1" type="checkbox" name="slot_from[]" value='1'> 9:00 AM -10:00 AM
                </label>
                <label class="form-check-label py-1">
                    <input class="slot selectedSlot2 weekday5" data-slot_time="2" type="checkbox" name="slot_from[]" value='2'> 10:00 AM -11:00 AM
                </label>
                <label class="form-check-label py-3">
                    <input class="slot selectedSlot3 weekday5" data-slot_time="3" type="checkbox" name="slot_from[]" value='3'> 11:00 AM -12:00 PM
                </label>
                <label class="form-check-label py-3">
                    <input class="slot selectedSlot4 weekday5" data-slot_time="4" type="checkbox" name="slot_from[]" value='4'> 12:00 PM -01:00 PM
                </label>
            </div>
        </div>
    </div>

推荐阅读