1

我有这个视图，其中有 2 个单选按钮强类型化到模型中，我希望根据这些单选按钮的状态启用/禁用文本框字段。

这是我现在正在处理的视图和脚本：

@model IList<MyApp.Models.ObjInfo>
@{
    ViewBag.Title = "SendItems";
}

<h2>Ebay Items</h2>

    <script src="/Scripts/jquery-1.7.1.min.js"
        type="text/javascript"></script>
    <script type="text/javascript">
    function dostate1() {
        $("#textfield1").attr("disabled", "disabled");
        $("#textfield2").removeAttr("disabled");
        $("#textfield3").removeAttr("disabled");
    }
    function dostate2() {
        $("#textfield1").removeAttr("disabled");
        $("#textfield2").attr("disabled", "disabled");
        $("#textfield3").attr("disabled", "disabled");
    }

    $(document).ready(function ()
    {
        alert("The document is ready");
        if ($("#state1").is(":checked")) {
            dostate1();
        } else {
            dostate2();
        }

        $("#state1").click(function (){
            alert("Auction radio button has been clicked");
            dostate1();
        });
        $("#state2").click(function () {
            alert("Buy It Now radio button has been clicked");
            dostate2();
        });
    });
    </script>
<p>
    @using (Html.BeginForm("ManageItems", "Item Inventory"))
    {
       (...)
            @for (int i = 0; i < Model.Count; i++)
            {
                <p>
                    <tr>
                        <td>@Html.DisplayFor(x => x[i].m_OtrObj.m_ObjName)</td>
                        <td>@Html.RadioButtonFor(x => x[i].m_State, "State 1", new {id = "state1", style ="width: 50px"})</td>
                        <td>@Html.RadioButtonFor(x => x[i].m_State, "State 2", new {id = "state2", style ="width: 50px"})</td>
                        <td>
                            @Html.TextBoxFor(x => x[i].m_Field1, new{id = "textField1", style = "width:200px"})
                        </td>
                        <td>
                            @Html.TextBoxFor(x => x[i].m_Field2, new {id = "textField2", style = "width:200px"})
                        </td>
                        <td>
                            @Html.TextBoxFor(x => x[i].m_Field3, new {id ="textField3", style = "width:200px" })
                        </td>
                    </tr>
                </p>
            }
        </table>
        <input type="submit" value="Do Something"/>
    }
</p>

现在我有两个主要问题：

  1. 单击每个单选按钮实际上会禁用我希望禁用的字段，但不要激活其他字段；
  2. 该脚本实际上仅在单击按钮时运行，但应在开始时运行以避免字段 1 处于活动状态，因为默认情况下启用“状态 1”单选按钮。

我真的是 javascript 的新手，所以任何人都可以帮助我吗？谢谢！！

编辑 **

我已经修改了脚本以向您展示迄今为止的演变，感谢所有提供帮助的人，脚本有效，但仅适用于列表中的第一项。考虑到它是一个对象列表（请参阅@model），我如何单独影响列表中的每个项目？

4

4 回答 4

1

将您的脚本更改为

$(document).ready(function ()
{
    alert("The document is ready");

    $("#state1").change(function (){ // use change event instead of click
        alert("state1 radio button has been changed");
        // use prop instead of attr and always use the disabled attribute 
        // (there is not enabled). Use true/false to alter its state
        $("#textField1").prop("disabled", true); 
        $("#textField2").prop("disabled", false);
        $("#textField3").prop("disabled", false);
    }).trigger('change'); // trigger a change event since it is the default 

    $("#state2").change(function() { // use change event instead of click
        alert("state2 radio button has been changed");
        $("#textField1").prop("disabled", false); 
        $("#textField2").prop("disabled", true);
        $("#textField3").prop("disabled", true);
    });
});
于 2013-03-11T15:15:58.130 回答
0

好的，所以：

  1. 您需要使用 jQuery 的 removeAttr 函数 ( http://api.jquery.com/removeAttr/ ) 启用单选按钮：

    alert("state1 radio button has been clicked");
$("#textField1").attr("disabled", "disabled");
$("#textField2").removeAttr("disabled");
$("#textField3").removeAttr("disabled");

    这是因为它是禁用控件的“禁用”属性的存在。

  2. 如果您将启用/禁用代码分解为函数：

    function doState1() {
  $("#textField1").attr("disabled", "disabled");
  $("#textField2").removeAttr("disabled");
  $("#textField3").removeAttr("disabled");
}

function doState2() {
  $("#textField1").removeAttr("disabled");
  $("#textField2").attr("disabled", "disabled");
  $("#textField3").attr("disabled", "disabled");
}

$(document).ready(function () {
  doState1();

  $("#state1").change(function (){
    doState1();
  });
  $("#state2").change(function() {
    doState2();
  });
});

然后，您可以在文档准备好时调用它们，并将它们连接到单击操作中。

编辑 要对按钮+字段集重复此操作，我会让您的循环生成每个元素唯一的ID，例如

<input type="radio" id="state_1_1">State 1_1
<input type="radio" id="state_2_1">State 2_1
<input type="text" id="textField_1_1">Text 1_1
<input type="text" id="textField_2_1">Text 2_1
<input type="text" id="textField_3_1">Text 3_1

<input type="radio" id="state_1_2">State 1_2
<input type="radio" id="state_2_2">State 2_2
<input type="text" id="textField_1_2">Text 1_2
<input type="text" id="textField_2_2">Text 2_2
<input type="text" id="textField_3_2">Text 3_2

然后更改代码以使用“search start of id”选择器并拆分 id 以获得集合和状态/文本字段编号：

function doState1(theid) {
    var idarr = theid.split("_");
    var state = idarr[1];
    var idval = idarr[2];
    $("#textField_1_" + idval).attr("disabled", "disabled");
    $("#textField_2_" + idval).removeAttr("disabled");
    $("#textField_3_" + idval).removeAttr("disabled");
}

function doState2(theid) {
    var idarr = theid.split("_");
    var state = idarr[1];
    var idval = idarr[2];
    $("#textField_1_" + idval).removeAttr("disabled");
    $("#textField_2_" + idval).attr("disabled", "disabled");
    $("#textField_3_" + idval).attr("disabled", "disabled");
}

$(document).ready(function () {

    if ($("#state_1_1").is(":checked")) {
        doState1("state_1_1");
    } else {
        doState2("state_2_1");
    }

    $('input[id^="state_1_"]').change(function () {
        doState1(this.id);
    });

    $('input[id^="state_2_"]').change(function () {
        doState2(this.id);
    });
});

见http://jsfiddle.net/raad/4vHBv/17/

于 2013-03-11T15:15:31.603 回答
0

你的第一个问题上面已经回答了。至于第二个，我建议将状态检查移至如下函数：

function checkState(){
    if($('#state1').is(':checked')){
       //do stuff...
    }
}

然后在文档准备好并且每次更改单选按钮的状态时运行该功能一次。

于 2013-03-11T15:20:07.043 回答
0

首先，您必须了解“启用”的名称没有这样的属性。要启用 html 元素，您必须从字段中删除 disabled 属性。

如果您想将您的字段从禁用更改为启用状态，那么就像我写的那样： $("#textField2").removeAttr("disabled"); $("#textField3").removeAttr("disabled");

上面的代码将启用 id 为“#textField2”和“#textField3”的文本框

于 2013-03-11T15:26:56.843 回答