0

我有一个使用 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>
4

3 回答 3

4 
$('.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/

于 2013-01-11T09:29:12.227 回答
1

另一种方法是向data-...应该相互关联的元素添加属性，然后将 JS 建立在这些新data-...属性的基础上。这可以在其他地方重新使用，使用不同的 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/

于 2013-01-11T10:39:48.113 回答
0

使用 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");  
});
于 2013-01-11T10:00:44.863 回答