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>

現在、2 つの主な問題があります。

  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

あなたの最初の質問はすでに上で答えられています。2つ目については、状態チェックを次のような関数に移動することをお勧めします。

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

次に、ドキュメントの準備ができたら、ラジオボタンの状態が変更されるたびに関数を実行します。

于 2013-03-11T15:20:07.043 に答える
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();
  });
});

you can then call them when the doc is ready, and hook them into the click actions.

Edit To repeat this for sets of buttons + fields, I would have your loop generate ids that are unique to each element, e.g.

<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

and then change the code to use a "search start of id" selector and split the id to obtain the set and state/text field number:

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

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

于 2013-03-11T15:15:31.603 に答える
0

まず、「enable」という名前でそのような属性がないことを理解する必要があります。html 要素を有効にするには、フィールドから disabled 属性を削除する必要があります。

フィールドを disabled から enable state に変更したい場合は、私が書いているようにしてください: $("#textField2").removeAttr("disabled"); $("#textField3").removeAttr("無効");

上記のコードは、ID「#textField2」および「#textField3」のテキスト ボックスを有効にします。

于 2013-03-11T15:26:56.843 に答える