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

时间:2016-12-29 16:55:54

标签: jquery asp.net jquery-ui

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>

感谢您的帮助!

1 个答案:

答案 0 :(得分:1)

enter image description here

一旦我将其更改为使用我的评论中提到的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>