在母版页中使用较新版本的 jquery ui 和旧版本答案

【问题标题】：using newer version of jquery ui alongside older version in master page在母版页中使用较新版本的 jquery ui 和旧版本
【发布时间】：2016-12-29 16:55:54
【问题描述】：

asp.net 项目的母版页使用 jquery 1.10.2 和 jquery-ui 1.10.1。我正在尝试使用 jquery 1.12.4 和 jquery 1.12.1 来使用“checkboxradio”功能。

我目前有这个，从 http://www.ipreferjim.com/2011/06/loading-newer-versions-of-jquery-and-jquery-ui-noconflict/ 找到的，但它似乎仍然无法正常工作

未捕获的错误：未找到 checkboxradio 小部件的标签...

在标题中（在正文之后也尝试过）

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var $jQuery = jQuery.noConflict(true);
        jQuery = $jQuery; // forces the new jQuery into global

        jQuery(function ($) {
            $.getScript('https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js', function () {
                $("input[type='checkbox']").checkboxradio();
            });
        });
    </script>

在体内

<label for="checkbox-nested-1">Heavy Metal<input type="checkbox" name="checkbox-nested-1" id="checkbox1"></label>
<label for="checkbox-nested-1">Rap<input type="checkbox" name="checkbox-nested-1" id="checkbox2"></label>
<label for="checkbox-nested-1">Pop<input type="checkbox" name="checkbox-nested-1" id="checkbox3"></label>

感谢您的帮助！

【问题讨论】：

尝试更改“for”属性以使用 id 属性而不是 name 属性。
这似乎没有帮助。甚至用 jqueryui.com 的示例替换了我的复选框，但也没有用。

标签： jquery asp.net jquery-ui

【解决方案1】：

当我将它更改为使用我评论中提到的 id 时，它就开始为我工作了。

        <!DOCTYPE html>
        <html>
            <head>

                <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
                <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
                <script type="text/javascript">
            var $jQuery = jQuery.noConflict(true);
            jQuery = $jQuery; // forces the new jQuery into global

            jQuery(function ($) {
                $.getScript('https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js', function () {
                    $("input[type='checkbox']").checkboxradio();
                });
            });
                </script>
            </head>
            <body>
                <label for="checkbox1">Heavy Metal<input type="checkbox" name="checkbox-nested-1" id="checkbox1"></label>
                <label for="checkbox2">Rap<input type="checkbox" name="checkbox-nested-1" id="checkbox2"></label>
                <label for="checkbox3">Pop<input type="checkbox" name="checkbox-nested-1" id="checkbox3"></label>
            </body>
        </html>

【讨论】：