0

I have a view with three textboxes and a CheckBox:

    @foreach( var item in Model )
{
    <tr>
        <td>
            @Html.CheckBox("name")
        </td>
        <td>
            @Html.EditorFor(m => item.Toolbox)
        </td>
        <td>
            @Html.EditorFor(m => item.Name)
        </td>
        <td>
            @Html.EditorFor(m => item.Link)
        </td>
    </tr>
}

And how i can create JS code to bind this checkboxes to diffirent textboxes? This "name" check box should disable/enable three textboxes for every time loop creates it. There are 500+ items in Model.

Lubudubu1010
  • 189
  • 4
  • 15
  • Check [This answer](http://stackoverflow.com/questions/2330209/jquery-checkbox-enable-disable) and I believe that if you use the code as you paste it tou will have many checkboxes with same id which is not good – szpic Sep 06 '14 at 20:49

2 Answers2

0

You may set counter and create unique class or some attribute for each block. For example:

<table id="myTable">
     @{
            int c = 0;
            for(int i = 0; i < Model.Count; i++)
            {
                c++;
                <tr class="@("block"+c)">
                    <td>
                        @Html.CheckBox("name", new {data_block=c})
                    </td>
                    <td>
                        @Html.EditorFor(m => item.Toolbox)
                    </td>
                    <td>
                        @Html.EditorFor(m => item.Name)
                    </td>
                    <td>
                        @Html.EditorFor(m => item.Link)
                    </td>
                </tr>
            }
</table>

and then javascript code:

$(function(){
        $('#myTable checkboxes').click(function(){
            var checkbox = $(this),
            blockNum = checkbox.data('block'),
            inputs = $('tr.block'+blockNum),
            state = checkbox.is(':checked');

            $.each( inputs, function( i, el ){
                $(el).prop("disabled", state);
            });
        });
    });
mykhailovskyi
  • 680
  • 1
  • 8
  • 19
0

Another way

<table id="myTable">
                @foreach( var item in Model )
                {
                    <tr>
                        <td>
                            @Html.CheckBox("name", new { @class = "nameCheckbox" })
                        </td>
                        <td>
                            @Html.TextBoxFor(m => item.Toolbox, new { @class = "someCleverClassName" })
                        </td>
                        <td>
                            @Html.TextBoxFor(m => item.Name, new { @class="someCleverClassName" })
                        </td>
                        <td>
                            @Html.TextBoxFor(m => item.Link, new { @class="someCleverClassName" })
                        </td>
                    </tr>
                }
            </table>

And the javascript

$(function(){
    $('#myTable .nameCheckbox').click(function(){
        $(this).closest('tr').find('.someCleverClassName').prop("disabled", $(this).prop('checked'));
    });
});
ingo
  • 5,469
  • 1
  • 24
  • 19
  • Well this seems to do nothing, clicking checboxes dont disable or enable if disabled textboxes. – Lubudubu1010 Sep 07 '14 at 07:44
  • My bad. was doing this without testing, I've fixed the code above. Appearantly editorfor doesn't out the css class names. but textboxfor does.. see this fiddle here https://dotnetfiddle.net/n4dntY – ingo Sep 07 '14 at 14:20