1

I have 4 tabs displayed on my page main page. Before users proceed with the form they have to read the terms and conditions then checked the checkbox before going to another page.

If the user did not check the terms checkbox they are not allowed to go to another page or tabs.

What I'm currently doing is, if the checkbox is unchecked it will display an error message. But I have a problem with the tabs. The error message is showing but they still can go to another page. How do I fix this problem? I want to achieve output that the display error message is showing and the tab page that they click is not showing.

$(document).ready(function() {
  $('#tabs a[href="#home"], #tabs a[href="#info"] ,#tabs a[href="#form"]').click(function() {

    if (!$('#reg').is(":checked")) {
      Swal.fire({
        icon: "warning",
        text: 'Please checked the checkbox first before viewing this page. '
      });
    }

  });

});
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>

<body>

  <div class="container">
    <h2>Dynamic Tabs</h2>
    <ul class="nav nav-tabs" id="tabs">
      <li class="active"><a data-toggle="tab" href="#homepage">Terms & Condition</a></li>
      <li><a data-toggle="tab" href="#home">Info</a></li>
      <li><a data-toggle="tab" href="#info">Form</a></li>
      <li><a data-toggle="tab" href="#form">Menu 3</a></li>
    </ul>

    <div class="tab-content">
      <div id="homepage" class="tab-pane fade in active">
        <h3>Terms and Conditions</h3>
        <span style="font-size: 80%;"><i>Please read the terms and condition first</i></span>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <label class="checkbox"><input type="checkbox" id="reg"> Please tick this if u have read and understand everything </label>
      </div>
      <div id="home" class="tab-pane fade">
        <h3>Menu 1</h3>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div id="info" class="tab-pane fade">
        <h3>Menu 2</h3>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
      </div>
      <div id="form" class="tab-pane fade">
        <h3>Menu 3</h3>
        <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
      </div>
    </div>
  </div>

</body>

</html>
JustAG33K
  • 1,403
  • 3
  • 13
  • 28
nonutt
  • 155
  • 1
  • 10
  • Disable them and enable them when checkbox is checked. – Grumpy Sep 11 '21 at 12:09
  • If I disabled them I won't be able to show the display message error. That is not the outcome that I tried to achieve. btw thank u for the suggestion :) – nonutt Sep 11 '21 at 12:17

2 Answers2

2

Just add return false at the end of your if checked condition, that's all.

$(document).ready(function() {
  $('#tabs a[href="#home"], #tabs a[href="#info"] ,#tabs a[href="#form"]').click(function(event) {

    if (!$('#reg').is(":checked")) {
      Swal.fire({
        icon: "warning",
        text: 'Please checked the checkbox first before viewing this page. '
      });
      return false; //  add this line
    }

  });

});
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>

<body>

  <div class="container">
    <h2>Dynamic Tabs</h2>
    <ul class="nav nav-tabs" id="tabs">
      <li class="active"><a data-toggle="tab" href="#homepage">Terms & Condition</a></li>
      <li><a data-toggle="tab" href="#home">Info</a></li>
      <li><a data-toggle="tab" href="#info">Form</a></li>
      <li><a data-toggle="tab" href="#form">Menu 3</a></li>
    </ul>

    <div class="tab-content">
      <div id="homepage" class="tab-pane fade in active">
        <h3>Terms and Conditions</h3>
        <span style="font-size: 80%;"><i>Please read the terms and condition first</i></span>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <label class="checkbox"><input type="checkbox" id="reg"> Please tick this if u have read and understand everything </label>
      </div>
      <div id="home" class="tab-pane fade">
        <h3>Menu 1</h3>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div id="info" class="tab-pane fade">
        <h3>Menu 2</h3>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
      </div>
      <div id="form" class="tab-pane fade">
        <h3>Menu 3</h3>
        <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
      </div>
    </div>
  </div>

</body>

</html>
darklightcode
  • 2,738
  • 1
  • 14
  • 17
  • that was quick. tq if u don't mind, can u explain the `return false` statement for this line ? – nonutt Sep 11 '21 at 12:50
  • 1
    In jquery `return false` is the same as calling both `event.preventDefault()` and `event.stopImmediatePropagation()` to cancel the behavior of an event. A more elaborate description you will find on this post [https://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false](https://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false) – darklightcode Sep 11 '21 at 13:03
0

  1. Create this CSS:

    .tabDisabled{pointer-events: none;}

  2. Add this class (using html or jQuery) to all other non active tabs: user can't click when check box is not checked and only alert message will be shown:

    //JS
$("ul.nav li").not(".active").addClass('tabDisabled');
//HTML
<li class="tabDisabled">

  3. When checkbox is checked remove this class from non active tabs to allow user to click them:

    $(".tabDisabled").removeClass('tabDisabled')

    jsfiddle

Khribi Wessim
  • 287
  • 2
  • 12