Question

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

Answer 1

你没有在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。

<强> Updated Demo

动态禁用多行的文本框

1 个答案: