動態禁用多行文本框

我使用d或w字段的事件onfocus動態創建行。我得到的是正確的，但單選按鈕 - 當我選擇dm時，d應該被禁用，cm，w應該被禁用。我不知道該怎麼做。請幫我出動態禁用多行文本框

<table class="table table-bordered table-hover" id="tvtable"> 
    <thead> 
     <tr> 
      <th width="10%" style="text-align: center;">Type</th> 
      <th width="20%" style="text-align: center;">A</th> 
      <th width="20%" style="text-align: center;">d</th> 
      <th width="20%" style="text-align: center;">w</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td> 
       <input type="radio" name="wd0" id="rd" value="dr" />Dm 
       <br/> 
       <input type="radio" name="wd0" id="rc" value="cr" />Cm</td> 
      <td> 
       <select id="m0" class="form-control"></select> 
      </td> 
      <td> 
       <input class="form-control c1 amt" type="number" id="w0" name="amt1" /> 
      </td> 
      <td> 
       <input class="form-control c2 amt" type="number" id="d0" name="amt2" /> 
      </td> 
     </tr> 
    </tbody> 
</table>

$(document).ready(function() 
{ 
    if ($('#rd').prop('checked')) 
    { 
    $(".c1").attr("disabled", "disabled"); 
    } 
    else if($('#rc').prop('checked')) 
    { 
    $(".c2").attr("disabled", "disabled"); 
    } 
    var counter = 0; 
    $(document).on("focus", ".amt", function (event) 
    { 
    counter++; 
    var list = '<tr><td><input type="radio" name="wd' + counter + '" id="rd" value="dr" />Dm<br/><input type="radio" name="wd' + counter + '" id="rc" value="cr" />Cm</td><td><select id="m' + counter + 
     '" class="form-control "></select></td><td><input class="form-control c1 amt" type="number" id="w' + counter + '" name="amount" /></td><td><input class="form-control c2 amt" type="number" id="d' + counter + '" name="amount" /></td></tr>'; 
    $('#tvtable').append(list); 
    }); 
});

http://jsfiddle.net/A8G5v/

來源

2014-07-10 Cerebus1504

您不包括jQuery的在加的jsfiddle語法錯誤。

您正在動態添加複選框，因此if()..else()將無法在document.ready上運行。

添加委託更改事件。

$(document).on('change', ':radio', function() { 
    if ($(this).prop('checked') && $(this).val() == 'dr') { 
     $(this).parents('tr').find(".c1").attr("disabled", "disabled"); 
     $(this).parents('tr').find(".c2").removeAttr("disabled"); 
    } else{ 
     $(this).parents('tr').find(".c2").attr("disabled", "disabled"); 
     $(this).parents('tr').find(".c1").removeAttr("disabled"); 
    } 
});

注：您的代碼生成它不會工作了以後append重複的ID。

Updated Demo

來源

2014-07-10 16:37:12

此代碼無法正常工作，一旦我所選擇的RD或RC，我不是能夠回覆的變化。對於第一行其正確工作後，我沒有得到它 – Cerebus1504

因爲你有**重複的ID **。 –

那麼你會爲此提出什麼解決方案。這是我正在尋找的確切型號。我無法獲得任何其他解決方案。我需要diff ID的，因爲我要立即推送批量數據 – Cerebus1504

動態禁用多行文本框

回答

相關問題