在jquery clone()上更改单选按钮的名称

时间:2014-01-15 21:16:52

标签: jquery forms jquery-clone

这是我的HTML ::

<fieldset>
    <legend>Attributes</legend>

    <div class="attr_container">
        <div class="attr_entry existent row">
            <div class="half">
                <label for="attribute[]">Attribute</label>
                <input id="attribute" maxlength="50" required="required" name="attribute[]" type="text">                
                <p>
                    <a href="javascript:void(0)" class="add_attr"><i class="fa fa-plus-circle"></i> Add Another Attribute</a> 
                    <span class="remove">| 
                    <a href="javascript:void(0)" class="remove_attr"><i class="fa fa-minus-circle"></i> Remove</a></span>
                </p>
            </div>
            <div class="half">
                <label for="designator">Is this attribute a designator?</label>             <input checked="checked" name="designator[0]" type="radio" value="0" id="designator[0]"> No
                <input name="designator[0]" type="radio" value="1" id="designator[]"> Yes
            </div>
        </div>
    </div>

</fieldset>

这是我的jQuery:

    $('.add_attr').click(function() {
        // clone and add
        $( ".attr_entry:first" ).clone(true).removeClass('existent').insertAfter( ".attr_entry:last" );
    });

    $('.remove_attr').click(function() {
        // remove entry
        if($(this).parents('.attr_entry').first().hasClass('existent')) {
            alert('You can not remove the first attribute entry.');
        } else {
            $(this).parents(".attr_entry").first().remove();
        }
    });

所以当我克隆它时,我想知道如何将name属性更改为designator[1] ..所以添加一个。我不知道如何在最后一个附加克隆之后克隆和插入时如何做到这一点。

这是我参考的HTML,用以说明如何接受单选按钮数组:

Radio buttons + array elements

因为我需要知道我在PHP for循环中可以做的属性并抓住属于它的正确指示符。

感谢您的帮助!

2 个答案:

答案 0 :(得分:4)

您可以通过评估存在多少$('.attr_entry')个元素来获取新索引。然后,您可以组合find()prop()来设置单选按钮的名称。

修改您的clone()行,如下所示:

var newIndex = $('.attr_entry').length;
$('.attr_entry:first').clone(true).removeClass('existent').insertAfter('.attr_entry:last').find('input[type="radio"]').prop('name', 'designator['+newIndex+']');

jsFiddle Demo

另请注意,元素的id属性应该是唯一的,因此您可能需要考虑同时更新(使用相同的prop()方法)。

答案 1 :(得分:2)

不太熟悉jquery中的clone您可以使用attr()函数设置属性。

所以你的代码看起来像这样:

var designatorIndex = 0;
$('.add_attr').click(function() {
    // clone and add

    var myVar = $( ".attr_entry:first" ).clone(true).removeClass('existent');

    $(myVar).attr('name', 'designator' + designatorIndex );
    $(myVar).id('designator' + designatorIndex);
    designatorIndex++;
    $(myVar).insertAfter( ".attr_entry:last" );
});