Home/ Questions/Q 7183801
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T18:04:12+00:00

Hi Initally tab1 is enabled and tab2,tab3 are in disable mode. by clicking 1st

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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