根据前一个元素的check状态决定其他元素disable

小咪咪 2024-02-18 23:55 37阅读 0赞

使用的时候直接将主动元素和被动元素的id输入参数就可以关联之间的关系。

checkNoDisable("aid","b1,b2,b3");

/**
     * @param aId 主动元素的id  
     * @param bIds 被动元素的id，多个使用逗号分隔
     */
    function checkNoDisable(aId,  bIds)
    {
        checkConditionDisable(aId, false, bIds);
    }
    function checkForDisable(aId,bIds){
        checkConditionDisable(aId, true,bIds);
    }
    function checkConditionDisable(a, isCheckForDisabled, b)
    {
        if ($("#" + a).length > 0)
        {
            conditionToDisable($("#" + a), isCheckForDisabled == true ? true : false, $("#" + b.split(",").join(",#")))
        }
        else
        {
            console.log("checkNoDisable主动元素不存在" + a)
        }
    }
    /**
     * 根据主动元素a的状态决定从动元素b的状态
     * @param a 主动元素
     * @param isCheckForDisabled true:生效条件是否为勾选禁用;反之false勾选启用
     * @param b 从动元素
     */
    function conditionToDisable(a, isCheckForDisabled, b)
    {
        //设置b初始状态
        if (a.prop("checked"))
        {
            b.each(function(i)
            {
                $(this).attr("disabled", isCheckForDisabled);
            });
        }
        else
        {
            b.each(function(i)
            {
                $(this).attr("disabled", !isCheckForDisabled);
            });
        }
        //清除后绑定click事件
        a.off("click").on("click", function()
        {
            var isChecked = a.prop("checked");
            b.each(function(i)
            {
                if (isChecked)
                {
                    $(this).attr("disabled", isCheckForDisabled);
                }
                else
                {
                    $(this).attr("disabled", !isCheckForDisabled);
                }
            });
        });
    
    }