Радиокнопки не работают ... Если они не находятся в iframe - PullRequest
Новая
       6

Радиокнопки не работают ... Если они не находятся в iframe

0 голосов
/ 08 мая 2020

Я пытаюсь создать документ HTML, содержащий переключатели. Этот документ не предназначен для браузера , а скорее является внешней программой, в которой мы работаем.

Сначала я разработал HTML вне программы и протестировал его в моем браузере, и он работает, как задумано.

JSFiddle: https://jsfiddle.net/e5dn3zbt/

Однако внутри программы этот документ ведет себя странно. После щелчка по набору переключателей выбранный вариант нельзя отменить, а невыбранный вариант нельзя щелкнуть. Это происходит для каждого набора переключателей, поэтому, используя JSFiddle в качестве примера, после того, как вы выберете True для вопроса 1, вы не сможете переключиться на False, то же самое произойдет с вопросом 2.

Попытка отладить проблему, с которой я столкнулся гипотеза о том, что некоторые унаследованные функции вызывали такое поведение, поэтому я сохранил документ HTML как внешний файл. html и сделал внутренний HTML рендеринг iframe с sr c, установленным для этого файла

<iframe src="file://C:/HTML/TestingRadio.html"></iframe>

и переключатели теперь работают точно так, как ожидалось внутри iframe.

Я бы предпочел избежать обходного пути iframe, так как это затруднит получение выбранных ответов и требуют создания файла для рендеринга, а не просто рендеринга HTML внутри.

Есть ли какое-нибудь простое решение, чтобы выяснить, что наследуется, что сломало бы переключатели? 

.question {
  color: black;
  font-family: "calibri";
  font-size: 20px;
}

.quizTitle {
  color: black;
  font-family: "calibri";
  font-size: 45px;
  text-align: center;
}
<div>
  <div class="quizTitle">
    True/False Quiz
  </div>
  <br>
  <br>
  <br>
  <p class="question" id="1">
    1. True or false?
    <br>
    <input type="radio" id="1-1" name="1" value="true">
    <label for="1-1">
			True
		</label>
    <br>
    <input type="radio" id="1-2" name="1" value="false">
    <label for="1-2">
			False
		</label>
    <br>
  </p>
  <br>
  <br>
  <br>
  <br>
  <p class="question" id="2">
    2. True or false?
    <br>
    <input type="radio" id="2-1" name="2" value="true">
    <label for="2-1">
			True
		</label>
    <br>
    <input type="radio" id="2-2" name="2" value="false">
    <label for="2-2">
			False
		</label>

    <br>
  </p>
  <br>
  <br>
  <br>
  <br>
  <p class="question" id="3">
    3. True or false?
    <br>
    <input type="radio" id="3-1" name="3" value="true">
    <label for="3-1">
			True
		</label>

    <br>
    <input type="radio" id="3-2" name="3" value="false">
    <label for="3-2">
			False
		</label>
    <br>
  </p>
</div>
...