使用選擇器使用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/

Answer 1

將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/

Answer 2

檢查一下;

$(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;
              }
            });
        });
    });

小提琴

Answer 3

將所有重復ID更改為類，並使用委托事件處理程序處理select元素上的change事件。

你需要讓每個選擇只更改具有相同行的元素是上下文，你這樣做是這樣的：

$('#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，那么你應該這樣做。