Включить / отключить динамически добавляемую строку в jquery

Question

Включить / отключить динамически добавляемую строку в jquery

0

В основном я создал страницу jsp. Вот демо. Когда был только один тип и идентификатор идентификатора, я могу легко включить или отключить поле ввода. Но я случайно испортил много полей. Как я могу изменить флажок типа имени типа ввода, чтобы, когда я проверяю номер индивидуального идентификатора, поле ввода будет включено/отключено?

Мой код здесь

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">

Добавить идентификатор Удалить идентификаторAdmin Тип системы: Тип администратора: - Выбрать - * Стоимость системной администратора:

DeSmOnd 06 янв. 2014, в 12:52

Источник

0

Вы видели это сообщение «Ссылки на jsfiddle.net должны сопровождаться кодом»? Это там по причине.
George 06 янв. 2014, в 11:37

Теги:

javascript

jquery

jsp

1 ответ

Ещё вопросы

Вы видели это сообщение «Ссылки на jsfiddle.net должны сопровождаться кодом»? Это там по причине.

Ludovic Guillaume · Accepted Answer · 2014-01-06T10-43-00.000Z

Чтобы изменить атрибут объекта jQuery:

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

Итак, в вашем случае:

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

У вас будет другая проблема в флажке идентификационного номера, измените это:

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

к этому:

$('#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);
    }
});

Вам не нужно изменять атрибут имени или что-то еще с этим кодом, потому что он ищет input[type=text] на том же уровне.

См. Http://api.jquery.com/siblings/ для получения дополнительной информации.

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