JSFiddle - React, Tailwind, and code Playground

by huuzoo

HTML

<div id="q1">
  <p>Q1.行きたい旅行先はどこですか？</p>
  <label><input type="radio" name="q1" value="okinawa" onclick="checkAnswer(this)">沖縄</label>
  <label><input type="radio" name="q1" value="hokkaido" onclick="checkAnswer(this)">北海道</label>
</div>

<div id="q2">
  <p>Q2.Q1で「北海道」と答えた人に質問です。<br>北海道で食べたいものはなんですか？</p>
  <label><input type="radio" name="q2" value="1" id="q2-1">うにいくら丼</label>
  <label><input type="radio" name="q2" value="2" id="q2-2">スープカレー</label>
</div>

JavaScript

function checkAnswer (radio) {
	var rd_value = radio.value;
  var q2 = document.getElementById('q2');
  var q2_1 = document.getElementById('q2-1');
  var q2_2 = document.getElementById('q2-2');
	if (rd_value == 'okinawa') {
  	q2_1.checked = false;
    q2_2.checked = false;
    q2_1.disabled = true;
    q2_2.disabled = true;
    q2.style.color = '#999999';
	} else {
  	q2.style.color = '#000000';
    q2_1.disabled = false;
    q2_2.disabled = false;
}
}