MVC 3 - 동적으로 텍스트 상자 추가

Question

사용자가 정보를 입력 할 테스트를 선택할 수있는 곳이 있습니다. 예 : 선택은 Test1을, 테스트 3를 말할 때

Test1 
Test2 
Test3 
Test4 

, 나는 단지이 두 텍스트 상자 필드 (Test1을, 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(); 

});