7 Replies - 582 Views - Last Post: 12 October 2017 - 12:42 PM

#1 Siena1383  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 29-March 10

How to enable a disabled control based on a user selection?

Posted 09 October 2017 - 05:28 PM

Still floundering my way through trying to do the most basic things with Javascript.

I have a set of radio buttons coded to be disabled. I want them to become enabled if the user makes a certain selection in a dropdown menu. How would I do it? I'm using unobtrusive JS only - this is all contained within the one page, nothing going to a server.

HTML:
<form>
    <!-- dropdown menu-->
	<div class="formRow">
		<label>Selection Box
			<select id="selectBox=" name="selectBox" placeholder=" " required /></label>
			    <option class="preSelection" disabled selected value></option>			
			    <option id="choice" name="choiceThis" value="thisOne">This One</option>
		            <option id="choice" name="choiceThat" value="thatOne">That One</option>
		            <option id="choice" name="choiceOther" value="theOtherOne">The Other One</option>					
			</select>
        </div>
				
    <!-- radio buttons -->
	<div class="formRow endSubSection">
            <p>Take your pick: <br />
            <input type="radio" id="radioAOrB" name="A" disabled/>Option A
            <input type="radio" id="radioAOrB" name="B" disabled/>Option B
            </p>
	</div>

</form>



CSS:
input:disabled {
                opacity: .5;
               }



JS:
var userChoice = document.getElementById("choice");
userChoice.onchange = function() {
                                  if (userChoice.value === "choiceThis") {
							                  var aOrB = document.getElementById("radioAOrB");
									  // change state of radio buttons to enabled
									  // and discontinue disabled state's CSS style.													  
							                 }
                                 }



Is This A Good Question/Topic? 0
  • +

Replies To: How to enable a disabled control based on a user selection?

#2 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1828
  • View blog
  • Posts: 5,755
  • Joined: 15-January 14

Re: How to enable a disabled control based on a user selection?

Posted 09 October 2017 - 05:53 PM

First, every ID needs to be unique. document.getElementById will only return one element, so every ID needs to be unique. If you need to refer to several elements don't use the ID for that, use a class.

I'm not sure which events option elements support, but I'm almost positive that onchange is not one of them. The option itself doesn't change. You need to have an event handler on the select element, and when it changes you can get the selected option and its value that way.

Once you decide what you want to do with the value, you can use document.getElementsByClassName to get an array of the radio button elements, and loop through them to enable or disable each one.
Was This Post Helpful? 0
  • +
  • -

#3 Siena1383  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 29-March 10

Re: How to enable a disabled control based on a user selection?

Posted 10 October 2017 - 07:36 PM

Thanks for your response.

Okay, I knew the ID needed to be unique, and I also know to group them and use a class for the radio buttons in the containing div. Don't know what I was thinking when I wrote that code! I've corrected that part of the HTML:

    <!-- radio buttons -->
	<div class="formRow endSubSection radioAOrB">
        <p>Take your pick: <br />
        <input type="radio" id="radioA" name="A" disabled/>Option A
        <input type="radio" id="radioB" name="B" disabled/>Option B
        </p>
	</div>



I see your point, that the menu option doesn't change, but the selection state does. It changes from no selection or the " " option to one of the text items. When I searched online for the correct event, that's the one that was mentioned.

But none of that is what I'm asking. The question is, what is the syntax for getting that set of radio buttons and its label (the question) to become enabled? Just for the sake of argument, say onchange is the correct event. Would I write something like:

.radioAOrB.onchange.enabled

Or what?
Was This Post Helpful? 0
  • +
  • -

#4 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1828
  • View blog
  • Posts: 5,755
  • Joined: 15-January 14

Re: How to enable a disabled control based on a user selection?

Posted 11 October 2017 - 10:41 AM

A function like onchange doesn't have an enabled property, I'm not quite sure what you're asking. If you give the radio buttons a class name then, like I said, you can use document.getElementsByClassName to get all of them and loop through them to enable/disable each one. That's not 1 line of code, it's just a basic for loop though.
Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is offline

  • the case is sol-ved
  • member icon

Reputation: 6376
  • View blog
  • Posts: 25,763
  • Joined: 12-December 12

Re: How to enable a disabled control based on a user selection?

Posted 11 October 2017 - 12:29 PM

Also your radio buttons should continue to have the same name if you expect them to be mutually exclusive.
Was This Post Helpful? 0
  • +
  • -

#6 Siena1383  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 29-March 10

Re: How to enable a disabled control based on a user selection?

Posted 11 October 2017 - 06:16 PM

Gaaah! I knew that about the names, too! I'll correct the code on the inputs.

But what I am asking is: I have a dropdown menu. When a certain item in the dropdown menu is selected, I want my radio buttons (and the label/question) to become enabled. As a whole. I shouldn't need to loop through anything, because I'm not trying to enable only the A radio button or only the B button.

Or maybe to say it differently, I want everything in the containing div to enable.

Even if I were to end up using a loop, I'm not asking how to do a loop. I'm asking what the syntax is to tell each item in the loop to enable.
Example:
for (blah blah blah) { 
                      enable this;
                     }


How would I write the "enable this" line?

This post has been edited by Siena1383: 11 October 2017 - 06:18 PM

Was This Post Helpful? 0
  • +
  • -

#7 andrewsw  Icon User is offline

  • the case is sol-ved
  • member icon

Reputation: 6376
  • View blog
  • Posts: 25,763
  • Joined: 12-December 12

Re: How to enable a disabled control based on a user selection?

Posted 11 October 2017 - 11:24 PM

a_button.disabled = false;
Was This Post Helpful? 0
  • +
  • -

#8 Siena1383  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 29-March 10

Re: How to enable a disabled control based on a user selection?

Posted 12 October 2017 - 12:42 PM

Oh, thank you, andrewsw! I'll try that. (I'll have to enable the label separately, but I think I can manage that.)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1