Question

我有一个强烈键入模型的2个radiobutton视图，我希望根据这些radiobuttons的状态启用/禁用文本框字段。

这是我现在正在研究的视图和脚本：

@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处于活动状态，因为默认情况下启用“状态1”单选按钮。

我真的 javascript的新手，所以有人可以帮我吗？谢谢！

编辑**

我已经修改了脚本以向您展示到目前为止的演变，感谢所有帮助过的人，脚本可以工作，但仅限于列表中的第一项。考虑到它是一个对象列表（参见@model），我如何单独影响列表中的每个项目？

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

Answer 2

好的，所以：

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

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

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

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

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以获取set和state / text字段编号：

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/

Answer 3

您的第一个问题已在上面得到解答。至于第二个，我建议将状态检查移动到这样的函数：

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

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

Answer 4

首先，你必须通过'enable'的名称来理解没有这样的属性。要启用html元素，您必须从字段中删除disabled属性。

如果你想把你的字段从禁用更改为启用状态，那么就像我写的那样： $（ “＃文本字段2”）removeAttr（ “禁用”）。 $（ “＃文本字段3”）removeAttr（ “无效”）;

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

在视图中使用javascript为列表中的每个项目启用radiobutton状态的文本框

4 个答案: