Question

我有一个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>

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

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

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

2 个答案: