JavaScript: A pair of radio button selections

I'm facing an issue with a short form that has two questions and radio buttons for answers. When the first question is answered "No," I used JS code to disable options for the second question, which works fine. However, if the answer is changed back to "Yes" on the first question, the second question remains disabled.

I want to allow users to change their minds and enable the second question if they switch from "No" to "Yes" on the first question. Can someone provide me with a solution?

var input = document.getElementById("jump-question"); 

function myFunction() {
if (input.checked == true){
alert("working")
document.getElementById("question-disable").setAttribute("disabled", true);
}
  }
javascript

Answer №1

When working with plain JavaScript, there is a need for some initial setup in order to make it functional. Are you finding the code snippet provided below useful?

function updateSecondQuestion() {
  var radios = document.radioForm.secondQuestion;
  for (var i = 0; i < radios.length; i++) {
    radios[i].disabled = document.radioForm.firstQuestion["value"] == "no";
  }
}
<form name="radioForm">
  <div>
    <p>First question?</p>
    Yes<input type="radio" onchange="updateSecondQuestion()" name="firstQuestion" value="yes" /> 
    No <input type="radio" onchange="updateSecondQuestion()" name="firstQuestion" value="no" />
  </div>
  <div>
    <p>Second question?</p>
    Yes <input type="radio" name="secondQuestion" value="yes" /> 
    No <input type="radio" name="secondQuestion" value="no" />
  </div>

</form>

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

What is the process of removing a document with Next.JS and MongoDB by utilizing next-connect?

Currently in the process of constructing my first CRUD application using NextJS/Mongodb and I've decided to utilize next-connect for handling the methods. As a newcomer to this field, I have managed to successfully create posts and update user profile ...

javascriptnode.jsmongodbnext.js

Generating interactive elements in VUE is key

I am unsure about how to dynamically create components without using the <component :is=''> tag. I would like to insert a component into the DOM through JavaScript. Similar to how you would add a new modal in jQuery with $("body").append(" ...

javascriptvue.jsdynamiccomponents

Utilize the power of AJAX for efficiently sorting search results retrieved from MySQL

I'm in the process of designing a flight search page. The initial page contains a form, and when the submit button is clicked, the search results are displayed on the second page. Here's the link to the first page: To test it out, please follow ...

javascriptphpjquerymysqlajax

Is it possible that .focus() does not function on a duplicated object?

Greetings to all! I have created a form with rows of input text fields. Users can add as many rows as needed by clicking the 'add row' button. The functionality to clone() for adding rows is working perfectly. In each row, an input field can o ...

javascriptjquery

Tips on accessing close autoComplete/TextField title in AppBar

Looking to add a search bar and login button in the AppBar, where the search Bar is positioned close to the title. The desired order for the AppBar components should be as follows: Title SearchBox LoginButton How can this be achieved? Below is th ...

javascriptreactjsecmascript-6material-ui

How to Load JSON Data Using D3 When Column Definitions are Separated

I'm currently working with d3.js and struggling to grasp how I can effectively load a JSON file representing a table that has separate column definitions. A typical JSON file, which I have no issue loading, might appear like this: [ { "id": 1, ...

javascriptjsond3.js

Navigating through the drupal module directory using JavaScript

Is there a way to retrieve the module path in Drupal 7 from which a .js file was loaded? Although JS is primarily a front-end language, is it possible that Drupal includes this information within the Drupal object? Essentially, I am trying to achieve so ...

javascriptajaxdrupal-7

Having trouble correctly parsing XML data using JavaScript

My input field contains the following XML code: <?xml version="1.0" encoding="utf-8"?> <players timestamp="1536505850"> <player id="0518" name="Eagles, Philadelphia" position="Def" team="PHI" /> <player id="10271" name="Jones, Jul ...

javascripthtmlxml

The issue with Internet Explorer failing to adhere to the restrictions set on maximum width and

I'm attempting to scale my images precisely using CSS: HTML: <div id="thumbnail-container"> <img src="sample-pic.jpg"/> </div> CSS: #thumbnail-container img { max-height: 230px; max-width: 200px; } In this scenario, ...

javascripthtmlcssinternet-explorer

How do I select all checkboxes in TypeScript when I only click on one of them?

I'm currently working with a list of checkboxes in my HTML code: <div class="col-sm-12" *ngIf="ControllerModel"> <div *ngFor="let controller of ControllerModel" class="panel col-md-6 col-lg-6 col-xs-6"> <div class="panel-heading" ...

javascriptangulartypescript

What's preventing me from invoking this object's function through an inline anchor?

CSS: <div class="box"> <p>This is a box</p> </div> Javascript: var box = { content : (function() {return ("This is the content of the box")}) }; alert("Box content: \n" + box.content()); $("output").text( +"<br/ ...

javascripthtmlcssjsfiddle

In production mode, the Angular/JS Express app is stuck in an endless routing loop, while it functions perfectly in development mode

My webapp is constructed using generator-angular-fullstack. While it functions properly in development mode (grunt serve), I encounter a problem with what appears to be an endless routing loop when switching to production mode (grunt serve:dist). The outp ...

javascriptnode.jsangularjsexpress

I'm looking for help on creating a three-column table using javascript/jquery. The table should display Product, Price, and Discount (which is calculated at 20%). Can anyone

Check out this code snippet. var items = ["Laptop", "Tablet", "Smartphone", "Headphones", "Camera"]; var costs = [599.99, 299.99, 799.99, 149.99, 499.99]; displayItems = ""; totalCost = 0; for (var j = 0; j < items.length; j++) { displayItems += " ...

javascripthtmljquery

Interactive jQuery tabbed interface with drop-down selectors, inconsistent display of drop-down options when switching between tabs

After receiving assistance from members oka and Mike Robinson, I have successfully created two tables for users to interact with using tabs and dropdowns. Both tables have the same structure and feature a dropdown menu to show/hide columns. Users can sele ...

javascriptjquerycssdrop-down-menu

Troubleshooting Navigation Bar Toggle Button Issue in Bootstrap 5

Currently, I am in the process of working on a web project that requires the implementation of a responsive sidebar. This sidebar should be toggleable using a button located in the navigation bar. My choice for the layout is Bootstrap, and I have come acr ...

javascriptcssbootstrap-5

What is the best way to determine the index of the area that was clicked on in chartjs?

I am currently working with a chart that may not have elements at specific indices, but I am interested in determining the index of the area clicked. https://i.sstatic.net/rEMbG.jpg When hovering over an area without an element, the assigned tooltip is d ...

javascriptcharts

Tips for activating this effect even when the window is resized during page scrolling

There's a code snippet that enables the header to become unfixed when a specific div reaches the top of the screen and then scrolls with the rest of the content. While this solution works perfectly, I encountered a problem where the calculations for ...

javascripthtmlcsscss-position

Incorrect script enqueue order in child theme of WordPress

Help needed with enqueuing a script in a WordPress child theme. Despite specifying Jquery dependency, the script is loaded before Jquery. The code in question: add_action( 'wp_enqueue_scripts', 'child_theme_scripts' ); function child_ ...

javascriptphpjquerywordpress

What is the purpose of using JSON.parse(decodeURIComponent(staticString))?

A specific approach is utilized by some dynamic web frameworks in the following code snippet <script> appSettings = JSON.parse( decodeURIComponent( "%7B%22setting1%22%3A%22foo%22%2C%22setting2%22%3A123%7D")); </script> Is there a part ...

javascriptjsonhtml

What is the reason behind the addition of '.txt' by the Next.js `Link` Component when redirecting to `href='/'` on GitHub pages?

My website is hosted on github-pages, and I am using the Link Component from Next.js to navigate within it. However, when I click on a component with the href="/", it adds .txt to the end of the URL. My website follows the /app structure. I have ...

javascripthtmlnext.jsgithub-pagesnext.js13