Как включить / отключить текстовое поле для соответствующего флажка в jquery при цикле в ASP.NET MVC?

Question

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

 $('.naCheckbox').click(function () {
        var $this = $(this);

        var checkboxId = $this.attr("id");
        var textboxId = checkboxId.slice(0, 16) + "ProfileAnswerText";

        if ($this.is(':checked')) {
            $('#' + textboxId).attr("disabled", "disabled")
        } else {
            $('#' + textboxId).removeAttr("disabled");
        }
    });



 <div id="tabs-1" class="tabTwo">
                    @for (var i = 0; i < Model.ProfileItems.Count(); i++)
                    {
                    <div class="question-block">
                        <p> @Html.HiddenFor(m => m.ProfileItems[i].ProfileFieldId)</p>
                        <p class="questions"> @Model.ProfileItems[i].ProfileQuestionText </p>

                        @if (Model.ProfileItems[i].NotApp == true)
                        {
                            @Html.TextAreaFor(m => m.ProfileItems[i].ProfileAnswerText, new { disabled = "disabled", @class = "autofit" })
                        }
                        else
                        {
                            @Html.TextAreaFor(m => m.ProfileItems[i].ProfileAnswerText, new { @class = "autofit" })
                        }

                        <label style="float: right; text-align:unset; width:220px;">
                            N/A
                            @Html.CheckBoxFor(m => m.ProfileItems[i].NotApp, new { @class = "naCheckbox" })
                        </label>
                    </div>
                    }
                </div>

Answer 1

Найдите минутку и прочитайте;

Развязка вашего HTML, CSS и JavaScript

Вы можете создать супер универсальную функцию:

    $('.js-checkbox-disable-toggle').on("click", (e) => {
      var $checkbox = $(e.currentTarget);
      var isChecked = $checkbox.prop('checked');
      var targetSelector = $checkbox.data('target');
      var $target = $(targetSelector);
      $target.prop('disabled', isChecked);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" class="js-checkbox-disable-toggle" data-target=".asdf, .qwerty" />I target asdf and qwerty<br/>

<input type="checkbox" class="js-checkbox-disable-toggle asdf" data-target=".qwerty" />I am asdf, I target qwerty<br/>

<input type="checkbox" class="qwerty" />I am qwerty, I don't do anything<br/>

Немного измени свой HTML:

@Html.TextAreaFor(m => m.ProfileItems[i].ProfileAnswerText, 
  new { disabled = "disabled", @class = "autofit disable-toggle-@(i)" })


@Html.TextAreaFor(m => m.ProfileItems[i].ProfileAnswerText, 
  new { @class = "autofit disable-toggle-@(i)" })

// with js-checkbox-enable-toggle
// anyone should figure out that this checkbox toggles enables :D
@Html.CheckBoxFor(m => m.ProfileItems[i].NotApp, 
  new { @class = "naCheckbox js-checkbox-disable-toggle", data_target=".disable-toggle-@(i)" })

, который должен отображать что-то вроде:

<textarea name="ProfileItems[1].ProfileAnswerText class="autofit disable-toggle-1">
</textarea>

<input type="checkbox" 
  name="ProfileItems[1].NotApp" class="naCheckbox js-checkbox-disable-toggle"
  data_target=".disable-toggle-1" />

2 .. 3 .. 4 ...

Теперь в любое время, когда вы хотите, чтобы флажок включал / отключал элемент, вы можете просто добавить js-checkbox-disable-toggle на флажок и сообщить ему, что для jQuery target через data-target, который может быть одним или несколькими элементами или даже селекторы или даже что-то сложное, как #myform input[type=text], #myform textarea.

Answer 2

Поскольку у вас есть элемент <div class="question-block"> в качестве родительского контейнера для ввода текстового поля и флажка, вы можете использовать относительные селекторы

$('.naCheckbox').click(function () {
    var isChecked = $(this).is(':checked');
    var parent = $(this).closest('.question-block'); // get the enclosing div
    var textbox = parent.find('.autofit'); // get the associated textbox
    textbox.prop('disabled', isChecked); // use .prop() rather that .attr()
});

Обратите внимание, что отключенные входы не будут отправлять обратно значение, поэтому использование readonly вместо disabled может быть более целесообразным, если вы хотите, чтобы значение было привязано к вашей модели