Как отобразить текстовое поле, если отмечена опция «другие» из группы флажков

Question

Я хочу отображать текстовое поле, используя JavaScript, когда опция «Другое» выбрана из группы флажков. Я использую бритвенные страницы с ядром asp.net 2.2

Я использую следующий скрипт, но он не работает.

   function onSelectChange() {
        var sel = document.getElementById('QuestionOptionId');
        var strUser = sel.options[sel.selectedIndex].text; 


       if (strUser.startsWith('Other'))
                document.getElementById('textBox').disabled = false;          

       else
            document.getElementById('textBox').disabled = true;  
    }
</script>

Fruits.cshtml (файл просмотра страницы бритвы)

        @foreach (var option in Model.QuestionOptions)
        {
            <input type="checkbox"  asp-for="QuestionOptionId"   id ="QuestionOptionId"  value ="@option.Value" onclick="onSelectChange()" />  @option.Text<br />              
        }

QuestionOptions - это список выбора:

Value=1 Text= Apple, 
Value=2 Text= Kiwi, 
Value=3 Text =Other

всякий раз, когда пользователь устанавливает флажок «Другое», он должен отображать текстовое поле. Что я здесь не так делаю? Я прочитал так много других ответов, но не смог понять этот.

Обновление-1

Я не знаю, почему в посте не отображается текстовое поле ... Я вставляю это здесь снова, это вне цикла foreach. Я убрал угловые скобки, так как думаю, что это смешивание с форматированием.

input type = "text" id = "textBox" name = "response" disabled = "disabled"

Answer 1

Попробуйте следующую модификацию в представлении и javascript:

Добавить метку вне ввода

@foreach (var option in Model.QuestionOptions)
{
   <Lable>
       <input type="checkbox" asp-for="QuestionOptionId" id="QuestionOptionId"  value="@option.Value"  /> @option.Text
   </Lable>
   <br />
}
<div>
    <input type="text" id="textbox" disabled="disabled" />
</div>

Используйте $(this).parent().text().trim(), чтобы получить текст

$('input:checkbox').on('click', function () {
            if ($(this).parent().text().trim() === "Other") {
                $('#textbox').removeAttr("disabled");
            }
        });

Обновление

Если вы хотите скрыть текстовое поле и скрыть текстовое поле при снятии флажка «Другой вариант», сначала вы можете изменить атрибут disabled на hidden, а затем определить, содержит ли текстовое поле атрибут hidden в JS, как показано ниже:

<input type="text" id="textbox" hidden />

if ($(this).parent().text().trim() === "Other")
   {
       if ($('#textbox').is(':hidden')) {
           $('#textbox').removeAttr("hidden");
        }
        else {
             $('#textbox').attr("hidden", "hidden");
             }
    }

Answer 2

Полное раскрытие: я никогда не использовал страницы Razor или asp.net

Мне трудно следить за тем, как ваш JavaScript обнаруживает, проверена ли другая опция.Похоже, что ваш Fruits.cshtml будет генерировать три отдельных ввода с одинаковым идентификатором «QuestionOptionId».

Кроме того, ваш отрубленный файл Fruits.cshtml не содержит код для текстового поля, которое вы хотели бы включитьхотя я предполагаю, что у вас есть текстовое поле с идентификатором "textBox" в скомпилированном HTML, которое вы хотели бы включить.

Я бы изменил ваш скрипт для этого:

function onSelectChange(element) {
  if (element === element.parentNode.querySelector(".other")) {
    console.dir(element);
    if (element.checked) {
      document.getElementById("textBox").disabled = false;
    } else {
      document.getElementById("textBox").disabled = true;
    }
  }
}

Вам нужно будет добавить класс «прочее» к соответствующему флажку ввода «Прочее».Вам также нужно изменить свой фрагмент Fruits.cshtml, чтобы функция «onclick» также передавала соответствующий элемент в сценарий.

@foreach (var option in Model.QuestionOptions)
{
    <input type="checkbox"  asp-for="QuestionOptionId"   id ="QuestionOptionId"  value ="@option.Value" onclick="onSelectChange(this)" />  @option.Text<br />              
}

Вот рабочий пример скомпилированного кода: https://codepen.io/bourn404/pen/yWVLdx