我有一个按钮，一旦点击将在我的表单上附加一组输入字段。它工作得很好，除了我想限制附加按钮只能在第一个追加的必填字段被回答之前工作。这是我的追加脚本：
<script type="text/javascript">
var oncount = 0;
$(function(){
$('a#add_field_online').click(function(e){
e.preventDefault();
oncount += 1;
$('#activation').append(
'<div class="row-fluid">'
+'<div class="span12" style="border-bottom:1px #dddddd; background-color:#cac6c6; ">'
+'<div style="float:left; width:5%;">'
+'<label> </label>'
+'<input type="radio" id="oprocess_where' + oncount + '" name="oprocess_where' + oncount + '" value="Online" checked >Online'
+'</div>'
+'<div style="float:left; width:7%">'
+'<label> </label>'
+'<select name="ostatus' + oncount + '" id="ostatus' + oncount + '" class="input-small">'
+'<option value="Ghost">Ghost</option>'
+'<option value="Actual">Actual</option>'
+'</select>'
+'</div>'
+'<div style="float:left; width: 7%">'
+'<label>Type</label>'
+'<select id="oupg' + oncount + '" name="oupg' + oncount + '" class="input-small" >'
+'<option value="" selected=" " > </option>'
+'<option value="Exp" >Exp</option>'
+'<option value="Post" >Post</option>'
+'<option value="Upgrade" >Upg</option>'
+'<option value="Retail" >Retail</option>'
+'</select>'
+'</div>'
+'<div style="float:left; width: 8%">'
+'<label>F.U.D</label>'
+'<input id="oupg_date' + oncount + '" name="oupg_date' + oncount + '" type="text" id="rate_1" class="input-small" />'
+'</div> '
+'<div style="float:left; width: 11%">'
+'<label>Phone Used</label>'
+'<select id="ophone_used' + oncount + '" name="ophone_used' + oncount + '" class="input-medium" >'
+'<option value="Basic" >Basic</option>'
+'<option value="LTE" >LTE</option>'
+'<option value="iPhone 4/4S" >iPhone 4/4S</option>'
+'<option value="iPhone LTE" >iPhone LTE</option>'
+'<option value="BlackBerry" >BlackBerry</option>'
+'<option value="3G/4G" >3G/4G</option>'
+'<option value="Data Block / Smartphone" >Data Block / Smartphone</option>'
+'</select>'
+'</div>'
+'<div id="odataBasic' + oncount + '" style="float:left; width: 12%;">'
+'<label>Data Plan</label>'
+'<select id="odata' + oncount + '" name="odata' + oncount + '" class="input-medium" >'
+'<option value="DDL" >DDL</option>'
+'<option value="DPPU" >DPPU</option>'
+'<option value="Data Block" >Data Block</option>'
+'<option value="$10" >$10</option>'
+'<option value="$15" >$15</option>'
+'</select>'
+'</div>'
+'<div id="odataSmart' + oncount + '" style="float:left; width: 12%; display: none;">'
+'<label>Data Plan</label>'
+'<select id="odata' + oncount + '" name="odata' + oncount + '" class="input-medium" >'
+'<option value="$15" >$15</option>'
+'<option value="$20" >$20</option>'
+'<option value="$25" >$25</option>'
+'<option value="$30" >$30</option>'
+'</select>'
+'</div>'
+'<div id="odivmessaging' + count + '" style="float:left; width: 11%">'
+'<label>Messaging</label>'
+'<select id="omessaging' + oncount + '" name="omessaging' + oncount + '" class="input-medium" >'
+'<option value="" selected=" " > </option>'
+'<option value="$5" >$5</option>'
+'<option value="$10" >$10</option>'
+'<option value="$15" >$15</option>'
+'<option value="$20" >$20</option>'
+'<option value="$30" >$30</option>'
+'</select>'
+'</div>'
+'<div style="float:left; width: 8%">'
+'<label>Rate Plan</label>'
+'<input id="orate' + oncount + '" name="orate' + oncount + '" type="text" id="rate_1" class="input-small" />'
+'</div> '
+'<div style="float:left; width: 8%">'
+'<label>Phone Number</label>'
+'<input id="onumber_act' + oncount + '" name="onumber_act' + oncount + '" type="text" id="number_act1" maxlength="10" class="input-small" />'
+'</div>'
+'<div style="float:left; width: 12%">'
+'<label>Notes / Username </label>'
+'<input id="onotes' + oncount + '" name="onotes' + oncount + '" type="text" id="notes" class="input-medium"/>'
+'<input type="hidden" name="oncounter[]" value="1">'
+'</div>'
+'</div>'
+'</div>'
);
$("#ophone_used"+ oncount).change(function(){
if ($("#ophone_used"+ oncount).val() == "Basic") {
('#odataBasic'+ oncount).show();
$('#odataSmart'+ oncount).hide();
} else {
$('#odataBasic'+ oncount).hide();
$('#odataSmart'+ oncount).show();
}
});
});
});
这是html按钮：
<div class="row-fluid">
<div class="span12">
<div class="w-box-header">Activation Details
<div class="pull-right">
<a href="#" class="btn btn-mini btn-danger" id="add_field"><span>Add In-Store Activation</span></a> <a href="#" class="btn btn-mini btn-success" id="add_field_online"><span>Add Online Activation</span></a>
</div>
</div>
<div id="activation">
</div>
</div>
</div>
所以基于追加脚本直到输入字段oupg_date1，用户不能追加第2组，直到字段oupg_date2为空，它们不能追加第3组，依此类推。谢谢你的阅读。