Comment dynamiquement activer ou désactiver la zone de texte en utilisant jQuery dans ASP.NET MVC?

Question

J'ai un projet ASP.NET MVC avec une grande liste de zones de texte d'entrée que je veux que l'utilisateur les contrôle indépendamment. Voici le link à quoi il ressemble maintenant.

Voici quelques choses que je veux avoir:

1. Chaque activer/désactiver le lien ne contrôle que chaque ligne.

2. Le nombre de lignes n'est pas fixé et il sera généré dynamiquement. Cela peut être 10 ou 20 lignes.

Qu'est-ce qu'un moyen générique de faire cela?

Voici mon exemple de code:

<script type="text/javascript"> 

    // first set 
    $(document).ready(function() { 
     $(".controller").toggle(

    function() { 
     $('#target1').removeAttr("readonly"); 
     $('.controller').empty().append("Disable"); 
    }, 

    function() { 
     $('#target1').attr("readonly", "readonly"); 
     $('.controller').empty().append("Enable"); 
    }); 
    }); 

</script> 

<ul> 
    <li>text field: 
     <input type="text" readonly="readonly" id="target1" value="Change me" /> 
     <a href="#" class="controller">Enable</a><br /> 
    </li> 
    <li>text field: 
     <input type="text" readonly="readonly" id="target2" value="Change me" /> 
     <a href="#" class="controller">Enable</a><br /> 
    </li> 
    <li>text field: 
     <input type="text" readonly="readonly" id="target3" value="Change me" /> 
     <a href="#" class="controller">Enable</a><br /> 
    </li> 
    <li>text field: 
     <input type="text" readonly="readonly" id="target4" value="Change me" /> 
     <a href="#" class="controller">Enable</a><br /> 
    </li> 
</ul> 

Answer 1

Essayez cela vous

$(document).ready(function() { 
    $(".controller").toggle(
     function() { 
      $(this).prev("input[type='text']").removeAttr("readonly"); 
      $(this).text("Disable"); 
     }, 
     function() { 
      $(this).prev("input[type='text']").attr("readonly", true); 
      $(this).text("Enable"); 
    }); 
}); 

Answer 2

$('li .controller').click(function() { 
    $(this).prev().removeAttr('readonly'); 
}); 

Ou comme suit votre exemple:

$(document).ready(function() { 
    $(".controller").toggle(
     function() { 
      $(this).text("Disable").prev().removeAttr("readonly"); 
     }, 
     function() { 
      $(this).text("Enable").prev().attr("readonly", "readonly"); 
     } 
    ); 
});