一度クリックするとフォームに一連の入力フィールドが追加されるボタンがあります。それはうまく機能しますが、最初の追加の必須フィールドが回答されるまでのみ、追加ボタンが機能するように制限したいと思います。ここに私の追加スクリプトがあります：
<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 を追加できません。読んでくれてありがとう。