动态添加表单输入时添加所需属性

Question

我有一个动态的表单，用户可以添加/删除表单输入。 问题是在隐藏的form-group中，我无法添加required的属性required因为在提交事件中，提交不会发生。

如何在每次按+按钮时添加required的属性，并在按-按钮时将其删除？

我试过这个： $('#barcode').prop('required',true); 但这是不对的，因为如果按2次+按钮，我将有2个具有相同ID的输入...

 var counter = 0; $('#form1') // Add button click handler .on('click', '.addButton', function() { counter++; var $template = $('#addLine'), $clone = $template .clone() .removeClass('hide') .removeAttr('id') .attr('data-index', counter) .insertBefore($template); // Update the name attributes $clone .find('[name="barcode"]').attr('name', 'barcode-' + counter).end() .find('[name="productsInBox"]').attr('name', 'productsInBox-' + counter).end() .find('[name="packer"]').attr('name', 'packer-' + counter).end() .find('[name="count"]').attr('name', 'count-' + counter).end(); $('#barcode').prop('required', true); }) // Remove button click handler .on('click', '.removeButton', function() { var $row = $(this).parents('.form-group'), index = $row.attr('data-index'); counter--; // Remove element containing the fields $('#barcode').prop('required', false); $row.remove(); }); 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="col-sm-6"> <form id="form1" method="post" action="actions?do=barcodePaleta_submit" class="form-horizontal" role="form"> <fieldset> <div class="form-group"> <label for="inputName" class="col-md-1 col-sm-2 control-label">box:</label> <div class="col-md-3 col-sm-4"> <input type="text" pattern=".{23,23}" class="form-control" name="barcode" required/> </div> <label for="inputName" class="col-md-1 col-sm-2 control-label">num:</label> <div class="col-md-1 col-sm-3"> <input type="number" min="0" class="form-control" name="productsInBox" required/> </div> <div class="col-xs-1"> <button type="button" class="btn btn-default addButton"><i class="fa fa-plus"></i> </button> </div> </div> <div id="addLine" class="form-group hide"> <label for="inputName" class="col-md-1 col-sm-2 control-label">box:</label> <div class="col-md-3 col-sm-4"> <input id="barcode" type="text" pattern=".{23,23}" class="form-control" name="barcode" /> </div> <label for="inputName" class="col-md-1 col-sm-2 control-label">num:</label> <div class="col-md-1 col-sm-3"> <input type="number" min="0" class="form-control" name="productsInBox" /> </div> <div class="col-xs-1"> <button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i> </button> </div> </div> <div class="form-group myTop"> <div class="col-lg-10 "> <button type="submit" name="formAction" value="next" class="btn btn-primary">submit</button> </div> </div> </fieldset> </form> </div> </div> 

Answer 1

我想念的问题想念。尝试使用+按钮

if($('#barcode').attr('required') != true){
       $('#barcode').attr('required',true);
    }

这个-按钮

if($('#barcode').attr('required')){
           $('#barcode').removeAttr('required');
        }