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

もう1つのアプローチは、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>

JavaScriptdata-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 に答える