1
我有四個單選按鈕（固定，百分比，每月，每年），我創建了五個字段的div，起始價格，結束價格，開始日期，結束日期和金額。我想要的是，當點擊固定或百分比按鈕時，應該啓用所有五個字段，並在每月或每年按鈕上單擊開始價格和結束價格字段時應該被禁用（因爲我不想傳遞這些字段的值）。我也有添加更多的羊肉需要做同樣的事情，即當增加更多的行到固定/百分比時，所有字段都應該啓用，並且在向月/字段添加行時，應該禁用開始/結束價格字段。提前致謝。對於格的標籤禁用單選按鈕更改
HTML代碼
<label class="col-sm-2 control-label" for="radioo">Commission type <b style="color:red;">*</b></label>
<div class="col-lg-10" required>
<label class="custom-control custom-control-primary custom-radio">
<input class="custom-control-input" type="radio" name="comission_type" value="0" checked="checked">
<span class="custom-control-indicator"></span>
<span class="custom-control-label">Fixed price</span>
</label>
<label class="custom-control custom-control-primary custom-radio">
<input class="custom-control-input" type="radio" name="comission_type" value="1">
<span class="custom-control-indicator"></span>
<span class="custom-control-label">Percentage wise</span>
</label>
<label class="custom-control custom-control-primary custom-radio">
<input class="custom-control-input" type="radio" name="comission_type" value="2">
<span class="custom-control-indicator"></span>
<span class="custom-control-label">Monthly</span>
</label>
<label class="custom-control custom-control-primary custom-radio">
<input class="custom-control-input" type="radio" name="comission_type" value="3">
<span class="custom-control-indicator"></span>
<span class="custom-control-label">Yearly</span>
</label>
</div>
HTML代碼
<div id="fixPerDiv" style="display:block;">
<div class="form-group">
<div class="col-lg-11 col-lg-offset-1">
<div class="table-responsive">
<table class="table" id = 'commision_tbl' >
<tr>
<td width = '20%'>Start price</td>
<td width = '20%'>End price</td>
<td width = '20%'>Start date</td>
<td width = '20%'>End date</td>
<td width = '20%'>Comission</td>
<td> </td>
</tr>
<tr>
<td><input type="number" name="commissions_start_price[]" class="form-control" value="" placeholder="Start Price" required="required" /></td>
<td><input type="number" name="commissions_end_price[]" class="form-control" value="" placeholder="End Price" required="required"/></td>
<td><div class="input-with-icon"><input type="text" data-provide="datepicker" value="" data-date-today-highlight="true" name="start_date[]" class="form-control" placeholder="Start date" required="required"/><span class="icon icon-calendar input-icon"></span></div></td>
<td><div class="input-with-icon"><input type="text" data-provide="datepicker" value="" data-date-today-highlight="true" name="end_date[]" class="form-control" placeholder="End date" required="required"/><span class="icon icon-calendar input-icon"></span></div></td>
<td><input type="number" name="commissions_amount[]" class="form-control" value="" placeholder="Commision price" required="required"/></td>
<td> </td>
</tr>
<tr>
<td colspan="6" align = "center">
<input type="button" value="Add More" id="price_addmorebtn" class="btn btn-outline-info">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
console.log('called');
$('input[type=radio][name=comission_type]').change(function() {
if (this.value == '0' || this.value == '1') {
$("#fixPerDiv").css("display","block");
}
else if (this.value == '2' || this.value == '3') {
$("#fixPerDiv").css("display","block");
}
});
});
</script>
腳本爲
Script代碼添加按鈕
<script>
$('#price_addmorebtn').click(function(){
var tr = "<tr>";
tr += "<td><input type=\"number\" name=\"commissions_start_price[]\" class=\"form-control\" placeholder=\"Start Price\" required /></td>";
tr += "<td><input type=\"number\" name=\"commissions_end_price[]\" class=\"form-control\" placeholder=\"End Price\" required /></td>";
tr += "<td><div class=\"input-with-icon\"><input name=\"start_date[]\" placeholder=\"Start date\" data-provide=\"datepicker\" data-date-today-highlight=\"true\" class=\"form-control\" required /><span class=\"icon icon-calendar input-icon\"></span></div></td>";
tr += "<td><div class=\"input-with-icon\"><input name=\"end_date[]\" placeholder=\"Start date\" data-provide=\"datepicker\" data-date-today-highlight=\"true\" class=\"form-control\" required /><span class=\"icon icon-calendar input-icon\"></span></div></td>";
tr += "<td><input type=\"number\" name=\"commissions_amount[]\" class=\"form-control\" placeholder=\"Commision price\" required /></td>";
tr += "<td><span class = 'romoverow icon icon-close' style=\"cursor:pointer; padding-top:12px;\" title=\"Click to remove this row.\"></span></td>";
$('#commision_tbl tr:last').before(tr);
});
$(document).on('click','.romoverow',function(){
//alert('Hello');
$(this).closest('tr').remove();
});
令人驚歎的，非常感謝。但有一個概率，當我點擊每月/每年的單選按鈕時，該行顯示按要求禁用了兩個字段。但當點擊添加更多按鈕時，新行並不禁用兩個字段，但是當將單選按鈕更改爲年/百分比/固定，反之亦然，那麼只有所有添加的行更改爲禁用每月/每年的兩個字段。現在我需要的是當我點擊添加按鈕每月/每年div我應該得到禁用（兩個）字段。比你這麼多:-) @ B.desai –
非常感謝你，它的工作:-) @ b.desai –
然後接受這個答案。 –