MVC 3 - 動態添加文本框

Question

我有一個sitution，用戶可以選擇他們想要輸入信息的測試。 例子：

Test1 
Test2 
Test3 
Test4 

當選擇Test1的說，Test3的，我需要創建只有這兩個文本字段（測試1，Test2的）的形式。我正在考慮循環瀏覽用戶選擇的選項，然後做一個表演，通過jquery隱藏，但不知道這是否是最好的方式去做這件事。是否有一種顯示用戶選擇的字段的優雅方式？

Answer 1

像這樣的事情可能很簡單：

<ul id="textboxes"> 
    <li> 
     <input type="checkbox" id="c1" name="c1" />     
     <input type="text" id="t1" name="t1" /> 
    </li> 
    <li> 
     <input type="checkbox" id="c2" name="c2" /> 
     <input type="text" id="t2" name="t2" style="display:none" /> 
    </li> 
<ul> 

那麼你的jQuery：

$('input[type="checkbox"]').click(function() { 
    var id = $(this).attr('id').replace('c',''); 
    $('#t'+id).slideToggle(); 
}); 

很明顯，你可以有更多的箱子那裏。如果你要走一條更具活力的路線，而且擁有無限的路線，我會更加真實地添加這些字段。

jsFiddle

Answer 2

$(':checkbox').each(function(){ //loop through your checkboxes 

    if($(this).prop('checked')) { //if the current checkbox is checked 

     var text = $(this).text(); //Test1, Test2 or whatever it might be. Would probably be better to store as a data-attribute on the checkbox 

     var $textfield = $('<input/>').attr({ type: 'text' }).val(text); //generate a textfield with the selected text from the checkbox 

     $('#yourForm').append($textfield); //add textfield to the form 
    } 

    $('#yourForm').show(); 

});