How to dynamically enable or disable the textbox by using jQuery in ASP.NET MVC?

Question

I have a ASP.NET MVC project with a large list of input textboxes which I want the user to control them independently. Here is the link how it looks like now.

Here are some things I want to have:

Each enable/disable link only controls each row.
The number of rows is not fixed and it will be generated dynamically. It can be 10 or 20 rows.

What is a generic way to do this?

Here is my code sample:

<script type="text/javascript">

    // first set
    $(document).ready(function() {
        $(".controller").toggle(

    function() {
        $('#target1').removeAttr("readonly");
        $('.controller').empty().append("Disable");
    },

    function() {
        $('#target1').attr("readonly", "readonly");
        $('.controller').empty().append("Enable");
    });
    });

</script>

<ul>
    <li>text field:
        <input type="text" readonly="readonly" id="target1" value="Change me" />
        <a href="#" class="controller">Enable</a><br />
    </li>
    <li>text field:
        <input type="text" readonly="readonly" id="target2" value="Change me" />
        <a href="#" class="controller">Enable</a><br />
    </li>
    <li>text field:
        <input type="text" readonly="readonly" id="target3" value="Change me" />
        <a href="#" class="controller">Enable</a><br />
    </li>
    <li>text field:
        <input type="text" readonly="readonly" id="target4" value="Change me" />
        <a href="#" class="controller">Enable</a><br />
    </li>
</ul>

rahul · Accepted Answer · 2010-02-01 13:31:48Z

2

Try this

$(document).ready(function() {
    $(".controller").toggle(
        function() {
            $(this).prev("input[type='text']").removeAttr("readonly");
            $(this).text("Disable");
        },
        function() {
            $(this).prev("input[type='text']").attr("readonly", true);
            $(this).text("Enable");
    });
});

answered Feb 1, 2010 at 13:31

rahul

188k50 gold badges239 silver badges266 bronze badges

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

1 Comment

Daoming Yang Over a year ago

Hi rahul, thanks. What's the difference between .prev("input[type='text']") and .prev()?

David Hellsing · Accepted Answer · 2010-02-01 13:30:50Z

0

$('li .controller').click(function() {
    $(this).prev().removeAttr('readonly');
});

Or as following your example:

$(document).ready(function() {
    $(".controller").toggle(
        function() {
            $(this).text("Disable").prev().removeAttr("readonly");
        },
        function() {
            $(this).text("Enable").prev().attr("readonly", "readonly");
        }
    );
});

answered Feb 1, 2010 at 13:30

David Hellsing

109k44 gold badges181 silver badges214 bronze badges

Collectives™ on Stack Overflow

How to dynamically enable or disable the textbox by using jQuery 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