CODEWITHSUNDEEP
javascriptjqueryjsp
DeSmOnd
DeSmOnd

Reputation: 178

Enable/Disable Dynamically added row in jquery

Basically I created a jsp page . Here is the demo. When there was only 1 identifier type and identifier number, I can easily enable or disable the input field. But i happen to mess up with multiple field. How can i change classname of input type checkbox so that when i check individual identifier number, input field will be enabled/disabled?

My Code Here

JS

$('<div/>', {
         'class' : 'extraPerson', html: GetHtml()
     }).appendTo('#container');




     $('#addRow').click(function () {
         if(counter>10){
                alert("Only 10 textboxes allow");
                return false;
        }  



           $('<div/>', {
               'class' : 'extraPerson'+counter, 'id': 'extraPerson'+counter,html: GetHtml()
     }).hide().appendTo('#container').slideDown('slow');
           counter++;


     });
     $('#removeRow').click(function () {

         if(counter==0){
             alert("No more textbox to remove");
             return false;
          }   
         counter--;
         $("#extraPerson"+counter).remove();
         //$("#Identification-Type"+counter).remove();
         //$("#Identification-Number"+counter).remove();




     });

 function GetHtml()
{
     // var len = $('.extraPerson').length;
    var $html = $('.extraPersonTemplate').clone();
    $html.find('[name=Identification-Number]')[0].name="Identification-Number" + counter;
    $html.find('[id=Identification-Number]')[0].name="Identification-Number" + counter;
    $html.find('[name=Identification-Type]')[0].name="Identification-Type" + counter;
   // $html.find('[id=Identification-Type]')[0].id="Identification-Type" + counter;

    return $html.html();    
}

HTML

<form name="pancettaForm" method="post"
    action="demor" id="pancettaForm">

    <ul>
        <li><label for="PartyChoose">Choose Appropriate Party:</label></li>
        <br>
        <input id="person" name="PartyChoose" type="radio"
            value="update-person" class="required" /> Person
        <br />
        <input id="organization" name="PartyChoose" type="radio"
            value="update-organization" class="required" /> Organization
        <br />
        <li id="Family-Name" style="display: none;">
        <input type="checkbox" class="Family-Name" value="Family-name" name="Family-name">
        <label for="Family-Name"><em>*</em>Family Name:</label> <input type="text"  name="Family-Name" class="required"></li>
        <li id="Organization-Name" style="display: none;">
        <input type="checkbox" class="Organization-Name" value="Organization-name" name="Organization-name">
        <label  for="Organization-Name"><em>*</em>Organization Name:</label> <input type="text" name="Organization-Name" class="required"></li>
        <div class="extraPersonTemplate">
<div class="controls controls-row">
        <li id="Identification-Type" style="display: none;">Identification Type:                        
                    <select name="Identification-Type" class="Identification-Type"><label for="Identification-Type">Identification Type:</label>
                            <option value="0">--Select--</option>

                    </select>
        <li id="Identification-Number" style="display: none;"><input type="checkbox" class="Identification-Number" value="Identification-Number" 
        name="Identification-number" id="Identification-Number"><label  for="Identification-Number"><em>*</em>Identification Number:</label>
            <input type="text" name="Identification-Number" >
        </li></li>
        </div>


<a href="#" id="addRow" style="display: none;"><i class="icon-plus-sign icon-white">

Add Identifier Remove IdentifierAdmin System Type: Admin Type:--Select-- *Admin System Value:

Upvotes: 0

Views: 1285

Answers (1)

Ludovic Guillaume
Ludovic Guillaume

Reputation: 3287

To change an attribute of a jQuery object :

$('.selector').attr('name', value);

So, in your case :

$html.find('[name=Identification-Number]').attr('name', 'Identification-Number' + counter);

You will have another issue in the identification number's checkbox event, change this :

$('.Identification-Number').click(function() {
    if ($('.Identification-Number').is(':checked')) {
        // ...
    }
    // ...
});

to this :

$('#pancettaForm').on('change', '.Identification-Number', function () {
    var $this = $(this);
    var $input = $this.siblings('input[type=text]');

    if ($this.is(':checked')) {
        $input.val('').attr('disabled', false);
    }
    else {
        $input.attr('disabled', true);
    }
});

You won't need to change the name attribute or something else with this code, because it looks for input[type=text] on the same level.

See http://api.jquery.com/siblings/ for more infos.

jsfiddle : http://jsfiddle.net/FyRy8/2/

Upvotes: 1

Related Questions