javascript - 使用选择器通过 jquery 启用/禁用输入文本

Question

感谢“Abhishek Jain”、“rps”、“adeneo”的代码。这有助于我解决它。

我对以下代码有疑问：

HTML

<table cellpadding="0" cellspacing="0" width="100%" class="table" id="addtable" border="1">
<thead>
  <tr>
    <th width="4%"><b>Date</b></th>
    <th width="4%"><b>Cut Number</b></th>
    <th width="4%"><b>Content</b></th>
    <th width="4%"><b>Others</b></th>
    <th width="5%"><b>Customer name</b></th>
    <th width="4%"><b>Customer code</b></th>
    <th width="5%"><b>Address</b></th>
    <th width="5%"><b>Owe amount</b></th>
    <th width="4%"><b>Executive</b></th>
    <th width="6%"><b>Obtain Amount</b></th>
    <th width="9%"><b>Obtain Room</b></th>
  </tr>
</thead>
<tbody>
  <tr id="addrow">
    <td><input name="date[]" id="mask_dm1" type="text" size="1" value=""></td>
    <td><input name="cutno[]" type="text" size="6" ></td>
    <td>
        <select name="cutcontent[]" id="selector">
            <option value="0">Please select</option>
            <option value="1">Value 1</option>
            <option value="2">Value 2</option>
            <option value="3">Value 3</option>
            <option value="other">Other</option>
        </select>
    </td>
    <td><input name="cutother[]" type="text" size="4"  id="cutother" disabled /></td>
    <td><input name="cusname[]" type="text" size="4" ></td>
    <td><input name="cuscode[]" type="text" size="2" ></td>
    <td><input name="cusaddress[]" type="text" size="4" ></td>
    <td><input name="owe[]" type="text" size="2"  id="cutowe" disabled /></td>
    <td><input name="executive[]" type="text" size="1"  /></td>
    <td><input name="obtainamount[]" type="text" size="2"  id="obtainamount" disabled /></td>
    <td><input name="obtainroom[]" type="text" size="2"  id="obtainroom" disabled /></td>
  </tr>
</tbody>

Javascript：

$(document).ready(function () {
    var clonedRow = '   <td><input name="date[]" id="mask_dm1" type="text" size="1" value=""></td>';
    clonedRow += '      <td><input name="cutno[]" type="text" size="6" ></td>';
    clonedRow += '      <td>';
    clonedRow += '          <select name="cutcontent[]" id="selector">';
    clonedRow += '              <option value="0">Please select</option>';
    clonedRow += '              <option value="1">Value 1</option>';
    clonedRow += '              <option value="2">Value 2</option>';
    clonedRow += '              <option value="3">Value 3</option>';
    clonedRow += '              <option value="other">Other</option>';
    clonedRow += '          </select>';
    clonedRow += '      </td>';
    clonedRow += '      <td><input name="cutother[]" type="text" size="4"  id="cutother" disabled /></td>';
    clonedRow += '      <td><input name="cusname[]" type="text" size="4" ></td>';
    clonedRow += '      <td><input name="cuscode[]" type="text" size="2" ></td>';
    clonedRow += '      <td><input name="cusaddress[]" type="text" size="4" ></td>';
    clonedRow += '      <td><input name="owe[]" type="text" size="2"  id="cutowe" disabled /></td>';
    clonedRow += '      <td><input name="executive[]" type="text" size="1"  /></td>';
    clonedRow += '      <td><input name="obtainamount[]" type="text" size="2"  id="obtainamount" disabled /></td>';
    clonedRow += '      <td><input name="obtainroom[]" type="text" size="2"  id="obtainroom" disabled /></td>';
    var appendRow = '<tr id="addrow">' + clonedRow + '</tr>';
    $('#btnAddMore').click(function () {
        $('#addtable tr:last').after(appendRow);
        $('select#selector').change(function () {
            var theVal = $(this).val();
            switch (theVal) {
                case '1':
                    $('input#cutowe').removeAttr('disabled');
                    $('input#obtainamount').removeAttr('disabled');
                    $('input#obtainroom').removeAttr('disabled');
                    break;
                case '2':
                    $('input#cutother').removeAttr('disabled');
                    break;
                default:
                    $('input#cutowe').attr('disabled', 'disabled');
                    $('input#obtainamount').attr('disabled', 'disabled');
                    $('input#obtainroom').attr('disabled', 'disabled');
                    $('input#cutother').attr('disabled', 'disabled');
                    break;
            }
        });
    });

    $('select#selector').change(function () {
        var theVal = $(this).val();
        switch (theVal) {
            case '1':
                $('input#cutowe').removeAttr('disabled');
                $('input#obtainamount').removeAttr('disabled');
                $('input#obtainroom').removeAttr('disabled');
                break;
            case '2':
                $('input#cutother').removeAttr('disabled');
                break;
            default:
                $('input#cutowe').attr('disabled', 'disabled');
                $('input#obtainamount').attr('disabled', 'disabled');
                $('input#obtainroom').attr('disabled', 'disabled');
                $('input#cutother').attr('disabled', 'disabled');
                break;
        }
    });
});

当我按下“添加更多行”按钮时，第 2 行名为“内容”的选择器会影响所有输入。如何解决？参见示例http://jsfiddle.net/N2jyy/6/

score 1 · Accepted Answer

更改为id后class

$(document).ready(function () {

$('#btnAddMore').click(function () {
    $('#addtable tr:last').after($('#addtable tr:last').clone(true));


    $('select.selector').change(function () {
        var theVal = $(this).val();
        switch (theVal) {
            case '1':
               $(this).parents('tr').find('input.cutowe,input.obtainamount,nput.obtainroom').removeAttr('disabled');
                break;
            case '2':
                $(this).parents('tr').find('input.cutowe,input.obtainamount,input.obtainroom,input.cutother').attr('disabled', 'disabled');
                break;
        }
    });
 });


});

上面的代码可以减少到更多，但这应该让你开始了解一些事情，比如拥有相同的 id 以及如何从当前访问其他列是一个坏主意

http://jsfiddle.net/N2jyy/9/

score 1 · Accepted Answer

检查这个；

$(document).ready(function(){
    $('#btnAddMore').click(function(){
        $('#addtable tr:last').after($('#addtable tr:last').clone());
        $('#addtable tr').each(function(){
            var currentTR = $(this);
            $(this).find('select#selector').change(function(){
              var theVal = $(this).val();
          switch(theVal){
            case '1':
              $(currentTR).find('input#cutowe').removeAttr('disabled');
              $(currentTR).find('input#obtainamount').removeAttr('disabled');
              $(currentTR).find('input#obtainroom').removeAttr('disabled');
              break;
            case '2':
              $(currentTR).find('input#cutother').removeAttr('disabled');
              break;
            default:
              $(currentTR).find('input#cutowe').attr('disabled', 'disabled');
              $(currentTR).find('input#obtainamount').attr('disabled', 'disabled');
             $(currentTR).find('input#obtainroom').attr('disabled', 'disabled');
              $(currentTR).find('input#cutother').attr('disabled', 'disabled');
              break;
             }
            });
        });
    });
    $('#addtable tr').each(function(){
            var currentTR = $(this);
            $(this).find('select#selector').change(function(){
              var theVal = $(this).val();
          switch(theVal){
            case '1':
              $(currentTR).find('input#cutowe').removeAttr('disabled');
              $(currentTR).find('input#obtainamount').removeAttr('disabled');
              $(currentTR).find('input#obtainroom').removeAttr('disabled');
              break;
            case '2':
              $(currentTR).find('input#cutother').removeAttr('disabled');
              break;
            default:
              $(currentTR).find('input#cutowe').attr('disabled', 'disabled');
              $(currentTR).find('input#obtainamount').attr('disabled', 'disabled');
             $(currentTR).find('input#obtainroom').attr('disabled', 'disabled');
              $(currentTR).find('input#cutother').attr('disabled', 'disabled');
              break;
              }
            });
        });
    });

小提琴

score 0 · Accepted Answer

将所有重复的 ID 更改为类，并使用委托事件处理程序来处理选择元素上的更改事件。

您需要使每个选择仅更改具有同一行的元素是上下文，您可以这样做：

$('#btnAddMore').on('click', function () {
    $('#addtable tr:last').after(appendRow);
});

$('#addtable').on('change', '.selector', function () {
  var theVal = $(this).val(),
      tr     = $(this).closest('tr');

  switch (theVal) {
    case '1':
      $('.cutowe, .obtainamount, .obtainroom', tr).prop('disabled', false);
      break;
    case '2':
      $('.cutother', tr).prop('disabled', false);
      break;
    default:
      $('.cutowe, .obtainamount, .obtainroom, .cutother', tr).prop('disabled', true);
      break;
  }
});

小提琴

我升级了 jQuery 版本，如果您正在认真使用 jQuery 1.3，那么您也应该这样做。

javascript - 使用选择器通过 jquery 启用/禁用输入文本

3 回答 3

Related

Reference