如何在 ASP.NET MVC 中使用 jQuery 动态启用或禁用文本框？答案

【问题标题】：How to dynamically enable or disable the textbox by using jQuery in ASP.NET MVC?如何在 ASP.NET MVC 中使用 jQuery 动态启用或禁用文本框？
【发布时间】：2010-02-01 13:23:59
【问题描述】：

我有一个 ASP.NET MVC 项目，其中包含大量输入文本框，我希望用户能够独立控制它们。这是link 现在的样子。

这是我想要的一些东西：

每个启用/禁用链接仅控制每一行。
行数不固定，会动态生成。它可以是 10 或 20 行。

什么是通用的方法？

这是我的代码示例：

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

【问题讨论】：

标签： jquery html asp.net-mvc

【解决方案1】：

试试这个

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

【讨论】：

嗨拉胡尔，谢谢。 .prev("input[type='text']") 和 .prev() 有什么区别？

【解决方案2】：

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

或者按照你的例子：

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

【讨论】：