Make a radiobutton "disabled"

Question

I am looking to see if there is a way to use Sugarcube 2 radiobutton but making it not selectable. I want to make a set of options but some are disabled yet still visible. Is this at all possible

Answer 1

If you have a form with radiobuttons set up like this:

<form>
  <input type="radio" name="gender" value="male" id="radioMale" checked> Male<br>
  <input type="radio" name="gender" value="female" id="radioFemale" disabled> Female<br>
  <input type="radio" name="gender" value="other" id="radioOther"> Other
</form>

That will have the "female" option disabled by default because of the "disabled" attribute.

You can also disable or enable them using JavaScript in Twine like this:

<<script>>document.getElementById("radioFemale").disabled = false;
document.getElementById("radioOther").disabled = true;<</script>>

That will enable the "female" option and disable the "other" option.

Hope that helps!

Comments

@HiEv: Your JavaScript example won't work because the input elements it is searching for won't exist at the time that code is executed.

@blinddog1066: If you want to use JavaScript to enable / disable HTML elements then you will need to use one of the Passage Events & Task Objects, in this particular case I would use the :passagerender event.

<<script>>
	$(document).one(':passagerender', function (ev) {
		ev.content.querySelector("#radioFemale").disabled = false;
		ev.content.querySelector("#radioOther").disabled = true;
	});
<</script>>

 

---

@greyelf: There's no point in doing the code using the ":passagerender" event except upon initial display.  If that's what he wanted he could probably just set the "disabled" property like I showed for "optionFemale" in the HTML code above and wouldn't need any JavaScript code.

Also, my JavaScript code works just fine in a Widget, a "<<link>>" macro, or other places where you'd set that property after the page is displayed, depending on user interactions.  For example:

<form>
  <input type="radio" name="gender" value="male" id="radioMale" checked> Male<br>
  <input type="radio" name="gender" value="female" id="radioFemale" disabled> Female<br>
  <input type="radio" name="gender" value="other" id="radioOther"> Other
</form>

<<link RadioToggle>><<script>>document.getElementById("radioFemale").disabled = !document.getElementById("radioFemale").disabled;
document.getElementById("radioOther").disabled = !document.getElementById("radioOther").disabled;<</script>><</link>>

 

---

@HiEv:

There's no point in doing the code using the...

This is why: I didn't disregard the HTML based solution; didn't promote one method over then other; and why I stated  "If you want to use JavaScript", thus leaving the choice of methods up to the OP.

I was simply predicting the "The JavaScript code results in an error message" comment when / if someone tried to use the original JavaScript example within the Passage (because you didn't indicate that they shouldn't do that, nor did the OP state that they wanted to interactively change the disabled state of the element), and correcting the problem before it occurred.

..JavaScript code works just fine in...

I didn't state that your JavaScript code wouldn't work in other use-cases just that it wouldn't work in the particular one that it was potentially going to be used in, which was a <<script>> macro being executed directly within a Passage.  (based on the fact that there was no mention of using the method interactively)

edit: You know as well as I do why calling the <<script>> macro within your <<link>> macro based example works when the same <<script>> macro called directly within the Passage wont.

---

it wouldn't work in the particular one that it was being used in, which was a <<script>> macro within a Passage.

@greyelf: But A) it can work in a passage, such as in the example I gave to you in reply.  And B) I didn't state it should be put as-is in the same passage originally.  That's why I listed it in a separate code block.

I appreciate your attempt at clarifying, however your clarification wasn't clear itself, and just made it sound like my code was completely broken, when it wasn't.  Don't say, "It won't work," when it will work, just in different circumstances than the one you're envisioning.

---

Thanks! Now to figure out how to turn that into $ variables that I can use later. Off to experiment.