CODEWITHSUNDEEP
javascriptjqueryhtmlajax
harry
harry

Reputation: 731

checkbox application on tabs

Hi Initally tab1 is enabled and tab2,tab3 are in disable mode. by clicking 1st checkbox in tab1 then tab2 will be enabled and i will go to 2nd tab and if i will uncheck the checkbox in tab1 then tab2 will be disabled. Same operation for 2nd checkbox. In fiddle it is working but in my netbeans ide it is not working why? I have kept javascript inside head and html inside body. In fiddle: http://jsfiddle.net/AavsW/14/

What should i do to get it worked in my ide?

In ide i have written like this:

<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>

Upvotes: 1

Views: 1742

Answers (1)

Umesh Patil
Umesh Patil

Reputation: 10685

Have you tested in browser, Are all styles and javascripts are taken as input...? May not be.

Test below test HTML file with your script. It is working same as 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>

Upvotes: 1

Related Questions