如果在表格網格中選中了復選框，則禁用文本框

Question

我有一個使用div的表格網格。 在該表中，我在每行上都有一個復選框和一個文本框。 如果選中復選框，我想禁用文本框。 我把小提琴放在這里。 如何在JavaScript中查找下一個div以禁用。

小提琴演示

HTML

<div class="containerDiv">

  <div class="rowDivHeader">
    <div class="cellDivHeader">Recommendation</div>
    <div class="cellDivHeader">Typical savings</div>
    <div class="cellDivHeader">Improved SAP</div>
    <div class="cellDivHeader">Improved EI</div>
    <div class="cellDivHeader">Indicative cost</div>
    <div class="cellDivHeader">Include</div>
    <div class="cellDivHeader lastCell">Removal Reason</div>
  </div>

  <div class="rowDiv">
    <div class="cellDiv">Room-in-roof-insulation</div>
    <div class="cellDiv">93.0</div>
    <div class="cellDiv">F : 29</div>
    <div class="cellDiv">B : 89</div>
    <div class="cellDiv">£1,500 - £2,700</div>
    <div class="cellDiv">
      <input type="checkbox" class="checkbox"/>
    </div>
    <div class="cellDiv lastCell">
      <input type="text" class="textbox"/>
    </div>
  </div>
  <div class="rowDiv">
    <div class="cellDiv">Room-in-roof-insulation</div>
    <div class="cellDiv">93.0</div>
    <div class="cellDiv">F : 29</div>
    <div class="cellDiv">B : 89</div>
    <div class="cellDiv">£1,500 - £2,700</div>
    <div class="cellDiv">
      <input type="checkbox" class="checkbox"/>
    </div>
    <div class="cellDiv lastCell">
      <input type="text" class="textbox"/>
    </div>
  </div>
  <div class="rowDiv">
    <div class="cellDiv">Room-in-roof-insulation</div>
    <div class="cellDiv">93.0</div>
    <div class="cellDiv">F : 29</div>
    <div class="cellDiv">B : 89</div>
    <div class="cellDiv">£1,500 - £2,700</div>
    <div class="cellDiv">
      <input type="checkbox" class="checkbox"/>
    </div>
    <div class="cellDiv lastCell">
      <input type="text" class="textbox"/>
    </div>
  </div>
</div>

Answer 1

$('.checkbox').click(function(){
  var textbox = $(this).parent().next().find('input');
  if($(this).prop('checked')){
    textbox.prop('disabled',true);
  }else{
    textbox.prop('disabled',false);
  }
});

這是jQuery代碼。

演示在這里http://jsfiddle.net/Hv3V4/17/

Answer 2

另一種方法是向應該相互關聯的元素添加data-...屬性，然后基於這些新的data-...屬性創建JS。 可以在其他地方使用不同的HTML來重新使用它，並且在重組HTML時將具有更大的靈活性。

例如，使用以下HTML

<div class="rowDiv" data-check-disables-scope>
  <div class="cellDiv">Room-in-roof-insulation</div>
  <div class="cellDiv">93.0</div>
  <div class="cellDiv">F : 29</div>
  <div class="cellDiv">B : 89</div>
  <div class="cellDiv">£1,500 - £2,700</div>
  <div class="cellDiv">
    <input type="checkbox" data-check-disables="input" class="checkbox"/>
  </div>
  <div class="cellDiv lastCell">
    <input type="text" class="textbox"/>
  </div>
</div>

可以編寫JavaScript，以便data-check-disables-scope定義jQuery搜索上下文。 在這種情況下，任何具有data-check-disables屬性的元素都將禁用與該屬性的值匹配的元素（該值應為jQuery選擇器）。 因此，在上面，此復選框將禁用文本輸入，因為<input ...>將與data-check-disables="input"屬性定義的選擇器匹配。

在以下HTML中，當切換復選框時，將禁用<select>和<input type="text"...>元素：

<div class="rowDiv" data-check-disables-scope>
  <div class="cellDiv">Multiple:</div>
  <div class="cellDiv">
    <input type="checkbox" data-check-disables="input, select" class="checkbox"/>
  </div>
  <div class="cellDiv">
    <input type="text" class="textbox"/>
  </div>
  <div class="cellDiv lastCell">
    <select name="select">
      <option value="value1">Value 1</option> 
      <option value="value2">Value 2</option>
      <option value="value3">Value 3</option>
    </select>
  </div>
</div>

JS

$('[data-check-disables-scope]').each(function() {

  var $scope = $(this),
      $src = $scope.find('[data-check-disables]');

  if (!$src.length) {
    return;
  }

  $src.each(function() {

    var $srcElm = $(this),
        qry = $srcElm.data('check-disables'),
        $target = $scope.find(qry).not($src);

    if (!$target.length) {
      return;
    }

    $target.prop('disabled', $srcElm.prop('checked'));

    $srcElm.on('change.check-disables', function() {
      $target.prop('disabled', $srcElm.prop('checked'));
    });

  });
});

演示： http : //jsfiddle.net/Hv3V4/21/

Answer 3

使用jQuery，你可以做這樣的事情

$("input[type='checkbox']").click(function(){
var i = $(this).parent().next(".lastCell").children("input");

  if(i.attr("disabled") == "disabled")
  {
    i.removeAttr("disabled");  
    return;    
  }    
  i.attr("disabled","disabled");  
});