Question

基本上我创建了一个jsp页面。这是演示。当只有1个标识符类型和标识符号时，我可以轻松启用或禁用输入字段。但我恰巧搞砸了多个领域。如何更改输入类型的类名复选框，以便在检查个别标识号时，输入字段是启用还是禁用？

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

添加标识符删除IdentifierAdmin系统类型：管理员类型： - 选择 - * 管理员系统价值：

Answer 1

要更改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/

在jquery中启用/禁用动态添加的行

1 个答案: