在視圖中使用javascript爲列表中的每個項目啓用單選按鈕狀態的文本框

Question

我有這種視圖，其中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. 點擊每個單選實際上禁用場I希望有殘疾，但不要激活其他領域;
2. 該腳本實際上只在單擊按鈕時運行，但應該在啓動時運行，以避免字段1處於活動狀態，因爲默認狀態下啓用了「狀態1」單選按鈕。

我是真的是作爲JavaScript的新手，所以任何人都可以幫我嗎？謝謝！！

編輯**

我修改劇本給你看的演變至今，感謝大家誰幫助了，劇本的作品，但僅限於在該列表中的第一項。考慮到它是一個對象列表（請參閱@model），如何單獨影響列表中的每個項目？

Answer 1

好了，所以：

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 

，然後改變代碼以使用「搜索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/

Answer 2

改變你的腳本爲

$(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 3

你的第一個問題已經回答了波夫。至於第二個我建議移動狀態檢查，以這樣的功能：

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

再一次在每個單選按鈕的狀態改變時，文件準備和運行的功能。

Answer 4

首先，您必須瞭解「enable」的名稱沒有這樣的屬性。爲了啓用html元素，您必須從字段中刪除禁用的屬性。

如果您想將您的字段從禁用狀態更改爲啓用狀態，那麼請按照我的寫法操作： $（「＃textField2」）。removeAttr（「disabled」）; $（「＃textField3」）。removeAttr（「disabled」）;

以上代碼當你說將使文本框ID爲「＃文本字段2」和「＃文字欄」