Question

嗨最初启用tab1并且tab2，tab3处于禁用模式。通过单击tab1中的第一个复选框，然后tab2将被启用，我将转到第二个选项卡，如果我将取消选中tab1中的复选框，则tab2将被禁用。第二个复选框的操作相同。在小提琴中，它正在工作，但在我的netbeans ide中它不起作用为什么？我把javascript保存在head和html里面。小提琴：http://jsfiddle.net/AavsW/14/

我应该怎么做才能让它在我的想法中发挥作用？

在ide我写的是这样的：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JSP Page</title>

<script type="text/javascript">

      $(document).ready(function() {
$('#wizard').tabs({ disabled: [1, 2] });

// when checkbox is clicked
$('.terms').click(function() {
    // get tab id
    var iTab = $(this).data('tabid');
    // is checkbox checked
    if ($(this).is(':checked')) {
        // enable tab
        $('#wizard').tabs('enable', iTab);
        // select tab
        $('#wizard').tabs('select', iTab);
    } else {
        // disable tab
        $('#wizard').tabs('disable', iTab);
        // empty textarea on the disabled tab
        $('#tab' + (iTab + 1) + ' .text').val('');
    }
});
});

    </script>
</head>
<body>
<form name="frm">
<div id="wizard">
<ul>
    <li><a href="#tab1">tab 1</a></li>
    <li><a href="#tab2">tab 2</a></li>
    <li><a href="#tab3">tab 3</a></li>
</ul>
<div id="tab1">
    <input type="checkbox" class="terms" data-tabid="1" onclick="" /> Terms 1<br />
    <input type="checkbox" class="terms" data-tabid="2" /> Terms 2
</div>
<div id="tab2"><textarea class="text"></textarea></div>
<div id="tab3"><textarea class="text"></textarea></div>
</div>
</form>
</body>
</html>

Answer 1

您是否在浏览器中测试过，所有样式和javascripts都被视为输入......？可能不是。

使用您的脚本测试以下测试HTML文件。它与jsfiddle一样工作。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
         <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script> 
        <script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
        <link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.core.css">
        <link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.theme.css">  
                <link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.tabs.css">
        <link rel="stylesheet" href="http://jqueryui.com/demos/demos.css">
        <title>JSP Page</title>

<script type="text/javascript">
      $(document).ready(function() { 
            $('#wizard').tabs({ disabled: [1, 2] });
            $('.terms').click(function() {

            var iTab = $(this).data('tabid');                   
            if ($(this).is(':checked')) {

                        $('#wizard').tabs('enable', iTab);

                        $('#wizard').tabs('select', iTab);
            } else {
                        $('#wizard').tabs('disable', iTab);
                        $('#tab' + (iTab + 1) + ' .text').val('');
            }
        }); 
    });
</script>
</head>
<body>
<form name="frm">
        <div id="wizard">
                <ul>
                    <li><a href="#wizard-1">tab 1</a></li>
                    <li><a href="#wizard-2">tab 2</a></li>
                    <li><a href="#wizard-3">tab 3</a></li>
                </ul>

                <div id="wizard-1">
                    <input type="checkbox" class="terms" data-tabid="1" onclick="" /> Terms 1<br />
                    <input type="checkbox" class="terms" data-tabid="2" /> Terms 2
                </div>

                <div id="wizard-2"><textarea class="text"></textarea></div>

                <div id="wizard-3"><textarea class="text"></textarea></div>
        </div>
</form>
</body>
</html>

选项卡上的复选框应用

1 个答案: