How to enable/disable textbox for associated checkbox in jquery when you loop in ASP.NET mvc?

Question

I made a bad attempt and it sort of working until there are more than 10 items.. I just take the name of the associated textbox and try to match it up with the checkbox but it is ugly..Someone have a proper way to do this ?

 $('.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>

You should be using relative selectors - what is your html to the inputs? — user3559349
– user3559349, Commented Oct 29, 2018 at 21:33
I edited and you can see the textarea and checkbox. Not sure what a relative selector is ? — punkouter
– punkouter, Commented Oct 29, 2018 at 21:41

user3559349 · Accepted Answer · 2018-10-29 21:48:00Z

1

Since you have a <div class="question-block"> element as a parent container for both the textbox and checkbox inputs, you can use relative selectors

$('.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()
});

Note that disabled inputs will not post back a value, so using readonly rather than disabled may be more appropriate if you want the value to be bound to your model

answered Oct 29, 2018 at 21:48

user3559349

Sign up to request clarification or add additional context in comments.

1 Comment

punkouter Over a year ago

The only solution seems more proper but your gets the job done quicker

Erik Philips · Accepted Answer · 2018-10-29 22:17:06Z

Take a minute and read;

Decoupling Your HTML, CSS, and JavaScript

You could create a super generic function:

    $('.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/>

Slightly change your 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)" })

which should render something like:

<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...

Now anytime you want a checkbox to enable/disable an item you can simply add js-checkbox-disable-toggle on the checkbox, and tell it what to jQuery target via data-target which could be one or many elements, or even selectors or even something complex like #myform input[type=text], #myform textarea.

Collectives™ on Stack Overflow

How to enable/disable textbox for associated checkbox in jquery when you loop in ASP.NET mvc?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related