动态禁用多行文本框

disabling textbox for multiple rows dynamically

本文关键字：文本 动态      更新时间：2023-09-26

我使用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/

您在JSfiddle中没有包含jQuery，加上语法错误。

你动态地附加了复选框，所以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");
    }
});

注意:你的代码正在生成重复的id，这不会在以后的append工作。

<<p> 更新演示/strong>
相关文章：