Toggle readonly and disabled on checkboxes

Question

I'm using mvc, I need to change the "readonly" and "disabled" attributes of element Html.CheckBoxFor. I'm using a JavaScript for that:

function ReadOnlyHandle() {
            var Collection = document.getElementsByClassName("SubjectCB");
            debugger;
            for (var i = 0; i < Collection.length; i++)
            {
                Collection.item(i)..("disabled", "disabled");
                Collection.removeAttribute("readonly", "readonly");
            }

        debugger;
    }

I'm trying to get the collection of checkboxes (since I have few) and then iterate them to change their attributes.

@for (int i = 0; i < Model.Topics.Count(); i++)
                {
                    <tr id="row-@i">
                        <td>@Html.LabelFor(t => t.Topics[i].Box.Selected, Model.Topics[i].Box.Text)</td>
                        <td class="SubjectCB">@Html.CheckBoxFor(t => t.Topics[i].Box.Selected, new { @checked = "checked", @readonly = "readonly", @disabled = "disabled" })</td>
                        <td class="IsReadOnly">@Html.TextBoxFor(model => model.Topics[i].NumberOfNoDifficulltySet, new { @readonly = "readonly" })</td>
                        <td class="IsReadOnly">@Html.TextBoxFor(model => model.Topics[i].NumberOfEasy, new { @readonly = "readonly" })</td>
                        <td class="IsReadOnly">@Html.TextBoxFor(model => model.Topics[i].NumberOfMedium, new { @readonly = "readonly" })</td>
                        <td class="IsReadOnly">@Html.TextBoxFor(model => model.Topics[i].NumberOfHard, new { @readonly = "read" })</td>
                    </tr>
                }

Yet, in the collection, the variable defined in Javascript does not have the "removeAttribute" function - why is that? Or can I change the attributes another way?

i don't think you can call `removeAttribute` on the entire collection, try to do `Collection.item(i).removeAttribute` — Abdul Ahmad, May 04 '15 at 14:22

score 0 · Accepted Answer · edited May 23 '17 at 11:58

0

First of all, set the class on the actual checkbox instead of the td (or make another class for it):

<td>
      @Html.CheckBoxFor(t => t.Topics[i].Box.Selected, 
           new { 
                 @checked = "checked", 
                 @readonly = "readonly", 
                 @disabled = "disabled", 
                 @class = "SubjectCB" 
               }
      )
</td>

Next..
You're trying to remove an attribute from the entire collection. This should work better, using disabled and readOnly:

Collection[i].disabled = false; //or true
Collection[i].readOnly = false; //or true

Or:

Collection[i].removeAttribute("readonly");

It should be noted though that readOnly doesn't work very well on checkboxes (if at all).

Instead, if you want to use something readonly-like, there is a work around posted here:

<input type="checkbox" onclick="return false;" />

Edit: Apparently I forgot to remove .item from the code. Corrected now.

edited May 23 '17 at 11:58

Community

1
1

answered May 04 '15 at 14:22

Mackan

6,200
2
25
45

Thank you for you help, however for some reason the use of Collection.item[i].removeAttribute("readonly") = false; creates an error: 0x800a138f - JavaScript runtime error: Unable to get property 'removeAttribute' of undefined or null reference - that is the function does not exists in this context... why? and the first solution: Collection.item[i].readOnly = false; //or true - does not change the attribute and it stays "readonly"... Do you have any isea about that? thanks again... – Lior Smila May 05 '15 at 06:54
@LiorSmila I assume you got it working now? The code you posted in your comment is not the same as I posted in my answer. There should be no `.item` :) If this post contributed to the solution, please mark it as answer by clicking the check mark (top left of my answer) – Mackan May 05 '15 at 07:13

Toggle readonly and disabled on checkboxes

1 Answers1