How do I use preventDefault to prevent checkbox from being clicked only when menu is open

Question

I am trying to make it so that when the dropdown menu is open, the links of the menu are clickable and go to the url while at the same time the checkbox is disabled from being clicked. I want to use .preventdefault() to achieve this but not sure where to start. Some guidance here would be appreciated.

let btnn = document.getElementById("btn");
btnn.addEventListener('click', function(event) {
  let dropdown = document.getElementById('dropdown');
  dropdown.classList.toggle("visible");
  
})


document.body.addEventListener("click", (event) => {
    let dropd = document.getElementById('dropdown');
    dropd.classList.remove("visible");
    event.preventDefault();
}, true)

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width">
    <!-- <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> -->
    <script
  src="https://code.jquery.com/jquery-3.6.0.js"
  integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
  crossorigin="anonymous"></script>
    <script src="https://kit.fontawesome.com/36947df53d.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
  <div class="logo">
    <p id="logo">Logo</p>
    <button id="btn"><i class="fa-solid fa-bars"></i></button>
  </div>
   <nav>
     <ul id="dropdown">
       <li><a href="contact.html" class="link">Link 1</a></li>
       <li><a href="#" class="link">Link 2</a></li>
       <li><a href="#" class="link">Link 3</a></li>
     </ul>
   </nav>
   <div class = input>
   <input type="checkbox" id="myCheckbox">
  </div>
    <script src="script.js"></script>
  </body>
</html>

body {
    height: 100vh;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.logo {
    display: block;
    text-align: left;
    background: red;
    height: 10vh;
}

.logo #logo {
    display: inline;
    line-height: 10vh;
    font-size: 3em;
    margin-left: 0.8em;
    
}

button#btn {
    display: inline;
    float: right;
    margin-right: 2em;
    margin-top: 0;
    margin-bottom: 0;
    border: none;
    background-color: red;
    padding: 0;
}

nav {
    display: block;
    background-color: black;
    width: 100vw;
}

nav ul {
    display: none;
    list-style-type: none;
    margin: 0;
    padding-left: 0;
}

nav ul li {
    text-align: center; 
}

.link {
    display: block;
    color: white;
    font-size: 2.4em;
    background-color: blue;
    text-decoration: none;
    width: 100vw;
    height: 7vh;
    line-height: 7vh;
    border-bottom: 2px solid black;
    text-align: center;
}

.visible {
    display: block !important;
}

.fa-bars:before, .fa-navicon:before {
    content: "\f0c9";
    font-size: 50px;
    line-height: 10vh;
}
.input {
    height: 200px;
    background-color: black;
    margin-top: 300px;
}

@media only screen and (min-width: 480px) { 
    
    .fa-bars:before, .fa-navicon:before {
        font-size: 35px;
    }

    /* #dropdown {
        display: block;
    } */

}
  
  @media only screen and (min-width: 600px) {

    .fa-bars:before, .fa-navicon:before {
        font-size: 30px;
    }
    
}

That is not the purpose of preventDefault. preventDefault prevents the default **action** of an element. There is no action associated with a checkbox. You could use preventDefault to prevent the default action of a submit button, which would be to submit a form. Or, to prevent the default action of a link, which is to redirect to an url. If you want to prevent a checkbox from being checked, disable the checkbox element (and there are a ton of questions & answers & tutorials that will show you how to do that) — devlin carnate, May 26 '22 at 19:21
Does this answer your question? [Enable/disable checkbox determind by users input](https://stackoverflow.com/questions/50471839/enable-disable-checkbox-determind-by-users-input) — devlin carnate, May 26 '22 at 19:23
I want it so that on a mobile menu, the checkbox (which would be visible while the menu if open) is unable to be checked, and all clicks outside of the button and menu links are disabled (so that the default behavior would be to simply close the menu when clicked outside the button and open menu) — Brian, May 26 '22 at 19:27
Then disable the elements you don't want to be selected / clicked on. — devlin carnate, May 26 '22 at 19:43

How do I use preventDefault to prevent checkbox from being clicked only when menu is open

0 Answers0