Managing the necessary button checkbox with JavaScript

Having an issue with handling a checkbox button in a form using JavaScript. I've created a customer information collection form that includes basic details like first name, last name, email, etc., and at the end of the form, I've added a navigation tab panel with 2 options.

In option 1, it's mandatory to check the checkbox before submitting. So there are two possible cases:

Case 1: If the customer enters basic information and selects option 1, checks the checkbox, and hits submit, everything works fine.

Case 2: However, if the customer chooses option 2 without checking the checkbox in option 1, the submit button should be disabled (i.e., can't be pressed).

My question is: When the user goes for option [1], they have to check the checkbox to submit the form. But when they choose option 2, I don't want them to check the checkbox; instead, I want them to know how to submit the form.

Due to my extensive project code, I've used a W3C snippet as a reference example for clarification of my problem. Any assistance would be highly appreciated!

Answer №1

Using javascript made solving this issue a breeze. What's the reason for giving this article a -3 rating?

<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
         *{
         margin:0px;
         padding: 0px;
         }
         body{
         width: 100%;
         height: auto;
         background-color: white;
         }
         table,td,tr{
         padding:5px;
         }
         table{
         max-width: 700px;
         margin:auto;
         display: table;
         background-color: #eee;
         }
         td{
         display: table-cell;
         font-size: auto;
         }
         input[type=checkbox]
         {
         /* Double-sized Checkboxes */
         -webkit-transform: scale(1.3, 1.3)
         }
         #seireki{margin-left: 34px;}
         #title{
         font-weight: 900;
         }
         /* button */
         .disable{pointer-events:fill}
         label{position:relative}
         label:after{
         position: absolute;
         content: "";
         width: 100%;
         height: 100%;
         }
         .button-group-item{
         border-radius: 1px solid gray;
         }
         /* button */
         .main input[type=radio] {
         display: none;
         }
         p span{border-bottom: 1px solid gray;}
         #tab-1:checked ~ ...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I have a few inquiries about my nodejs studies. Can you assist me, please?

As I delve into my studies of nodejs, some burning questions have arisen. Is it true that nodejs supports all JavaScript? In the official documentation, it mentions using the latest v8 engine. However, I have reservations about whether all JavaScript ...

Having trouble with image hover functionality on pure CSS?

<div id="headermenu"> <ul > <li id="menu1"><a href="#"><img src="images/menu1.png"/></a></li> <li id="menu2"><a href="#"><img src="images/menu2.png"/></a> < ...

"Distort" the Surface of Points Mesh in Three.js

After importing a Mesh from a JSON File, I am showcasing my latest progress: Take a look at my Project here The object was originally exported from Blender as JSON, and I utilized its vertices to generate a geometry of Points (THREE.Points) (which signif ...

Get the skin image link from the app folder in Magento

I am attempting to manually insert social icons into my project. projectname/app/design/frontend/projectname/default/template/page/html/footer.phtml This is the HTML code: <a src="../">facebook</a> What is the proper method to link the imag ...

The Thymeleaf template in Spring Boot does not display the necessary CSS styles

Currently, I am exploring the use of Thymeleaf and Flying Saucer for generating PDFs from templates. However, I have encountered an issue with applying CSS to my Thymeleaf template. Despite reviewing various questions & answers here, here, and here, none o ...

Organizing subcategories within a dropdown checklist

I am currently working on a list that utilizes dropdownchecklist and I am looking to create subgroups from the elements in the list. The goal is that by clicking on a subgroup checkbox, it will automatically check all elements associated with it. Below is ...

Guide on incorporating typed components into module federation in React

I've been encountering an issue with setting the type of a custom component exposed through Webpack module federation. Though I have successfully exposed and used the component, Typescript is flagging an error regarding its type. The situation invol ...

Execute a script when a post is loaded on a WordPress page

I am looking to have my jQuery script execute every time a post page is opened or loaded. I tried using echo in the script but it did not work. Where should I place the script to ensure it runs? single.php <script src="https://ajax.googleapis.com/aja ...

Tips for capturing a webpage thumbnail using a combination of jQuery and PHP from a specified link

Is there a way to capture a web page thumbnail using jQuery and PHP for a specific link? Imagine if I were to assign a PHP variable like this: $screen="http://www.yahoo.com" Can we implement the use of AJAX, jQuery, and PHP to display a thumbnail of the ...

Is there a way to create a self-contained installation package for my Vue application?

Is it possible for my application to be downloaded and installed without requiring internet access after the download is complete? I am looking to create a standalone installer for this purpose. Are there any suggestions on how to go about implementing t ...

Sequenced jQuery promises with the ability to halt execution

Currently, I am in the process of writing API code that involves multiple layers of wrapping around $.ajax() calls. One crucial requirement is to allow users to cancel any request, especially if it is taking too long. Typically, canceling a request can b ...

Is it feasible to maintain a button in a fixed position even after performing zoom in or zoom out on a mobile device?

I have been working on a website with a fixed position button that works well on desktop. However, I am wondering if it is possible to keep the button in a fixed position even after zooming in or out on a mobile device. Alternatively, can the button be r ...

What criteria do web browsers use to determine the order in which to apply @media queries when there are multiple relevant queries for the device

My website requires adjusting element positioning based on specific resolutions. One example is this media query: @media all and (max-width: 385px) And another one: @media all and (max-width: 500px) The device I am using has a width below 385px, but i ...

Invoking a Jquery Dialog

Every time I click on the button to display a message, I encounter an issue where one MessageBox appears as expected. However, when I open the Jquery Dialog for the second time, two MessageBoxes pop up and the same problem occurs with three MessageBoxes on ...

Resolving a Routing Problem with moment.js

Hi everyone, I'm new to working with express.js and backend routing. I'm encountering an error with my server code and would appreciate any insights on what might be causing it. I've already tried using res.end() with plain text, but the err ...

Keep the HTML structure of an element in the DOM while excluding it from an ng-repeat loop

I am currently working with the array badge = [{'name':'abc', 'flag': true}, {'name':'cde', 'flag': false}, {'name':'def', 'flag': true} ] After using it with ng-rep ...

Looking for ways to ensure React is responsive and feeling a bit challenged by the React mentality?

I'm still getting the hang of ReactJS, and I've been facing some challenges with making React components responsive. For my app, I am utilizing react-tabs. It works well when the screen is wide, but I need to switch to a hamburger panel layout w ...

Troubleshooting problem with decrypting data using CryptoJS AES256

I am currently facing an issue with the decryption of a URL that has been encoded using AES256. I am using CryptoJS for the decryption process, but I keep encountering the following exception: Malformed UTF-8 data Have I missed something in the code? rout ...

What is the best way to utilize HTTP headers in caching dynamic CSS?

Although this question is similar to this one on Stack Overflow, the provided solution does not seem to be effective. I am currently working on a WordPress plugin where I need to generate a dynamic CSS file. Below is the code snippet I am using: public s ...

Retrieving request information from the getInitialProps() function

Currently, I am attempting to send data from a python script to a Next.js server. #python script import requests post_data = {'username':'bob', 'id' : 32} # POST some form-encoded data: post_response = requests.post(url=&apo ...