2016-09-18 25 views
1

我是jQuery中的新成員,請幫助我解決我的問題。爲其他人選擇的禁用選項在jQuery中添加新行時

我有動態選擇框與動態行,我想代碼這些選擇框,當在選擇框中選擇一個選項時,應該在默認情況下在所有其他選擇框中禁用,但是我在更改選擇框,但是當我添加一個新行時,爲新創建的選擇框啓用相同的選項。

HTML:

$(document).ready(function() { 
 
     GetDeonmination('Denomination'); 
 
    } 
 

 
    function GetDeonmination(ddlId) { 
 
     $.getJSON("@Url.Action(" 
 
     GetCash ")", function(data) { 
 
      var $select = $('#' + ddlId); //$('#down'); 
 
      $.each(data, function(key, value) { 
 
      $('<option>').val(value.CashID).text(value.Denominatin).appendTo($select); 
 
      }); 
 
     }); 
 
    } 
 

 
    $('.addNewCash').on('click', function() { 
 
     i = rowCounts = $('#tbody tr').length; 
 
     addRow(i); 
 
    }); 
 

 
    function addRow(i) { 
 
     var tr = '<tr class="dataCash">' + 
 
     '<td style="text-align:center">' + 
 
     '<select name="Denomination" class="Denomination" onchange="Calculate(\'Count' + (i) + '\', \'Denomination' + (i) + '\', \'Total' + (i) + '\');" id="Denomination' + (i) + '">' + 
 
     '<option>--Select--</option>' + 
 
     '</select>' + 
 
     '</td>' + 
 

 
     '<td style="text-align:center"><input type="text" name="Count" id="Count' + (i) + '" class="Count" onkeyup="Calculate(\'Count' + (i) + '\', \'Denomination' + (i) + '\', \'Total' + (i) + '\');" /></td>' + 
 
     '<td style="text-align:center"><input type="text" name="Total" class="Total" id="Total' + i + '" class="Total" /></td>' + 
 
     '<td style="vertical-align: middle; text-align:center"><a href="#" class="removeCash"><i class="glyphicon glyphicon-remove" style="text-align:center"></i></a></td>' + 
 
     '</tr>'; 
 
     $('#tbody').append(tr); 
 
     GetDeonmination("Denomination" + i); 
 

 
    };
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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' type='text/css' /> 
 

 

 
<table class="table table-hover table-bordered table-responsive" id="CashTable"> 
 
    <thead> 
 
    <tr> 
 
     <td style="background-color: #6600CC; font-weight:bold; color: #FFFFFF; text-align: center;">Denomination</td> 
 
     <td style="background-color: #6600CC; font-weight:bold; color: #FFFFFF; text-align: center;">Count</td> 
 
     <td style="background-color: #6600CC; font-weight: bold; color: white; text-align: center;">Total</td> 
 
     <td style="background-color: #6600CC; font-weight: bold; color: white; text-align: center;"> 
 
     <a href="#" class="addNewCash"><i class="glyphicon glyphicon-plus"></i></a> 
 
     </td> 
 
    </tr> 
 
    </thead> 
 
    <tbody id="tbody" class="tbody"> 
 
    <tr class="dataCash"> 
 
     <td style="text-align:center"> 
 
     <select name="Denomination" class="Denomination" id="Denomination" onchange="Calculate('Count', 'Denomination', 'Total')"> 
 
      <option>--Select--</option> 
 
     </select> 
 
     </td> 
 
     <td style="text-align:center"> 
 
     <input type="text" name="Count" onkeyup="Calculate('Count', 'Denomination', 'Total');" class="Count" id="Count" /> 
 
     </td> 
 
     <td style="text-align:center"> 
 
     <input type="text" name="Total" class="Total" id="Total" readonly /> 
 
     </td> 
 
     <td style="vertical-align: middle; text-align:center"> 
 

 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

+0

「Uncaught SyntaxError:missing)arguments list」in code snippet。 –

+0

Mr Jeroen Heier語法錯誤是由於當點擊添加行時發送請求到服務器以獲取選擇框的數據請查看代碼thnx –

回答

0

您可以設置一個標誌,當被稱爲onchange事件,並要禁用選擇框。當你追加一個新行時,你可以爲新創建的選擇下拉菜單設置「disabled = true」。

相關問題