CODEWITHSUNDEEP
javascripthtmljqueryjquery-uijquery-events
Sri
Sri

Reputation: 2273

Disable the textbox if checkbox is checked in a table grid

I have a table grid by using div's. In that table, i have a checkbox and the textbox on each row. I want to disable the textbox if the checkbox is checked. I attached the fiddle here. How to find the next div in JavaScript to disable.

Fiddle demo

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>

Upvotes: 0

Views: 970

Answers (3)

tiffon
tiffon

Reputation: 5040

Another approach is to add data-... attributes to elements that should relate to each other, and then base the JS off these new data-... attributes. This could be re-used elsewhere, with different HTML, and there would be more flexibility with restructuring the HTML.

For example, with the following 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 could be written so that data-check-disables-scope defines a jQuery search context. Within that context, any element that has a data-check-disables attribute will disable elements matched by that attribute's value (the value should be a jQuery selector). So, in the above, the checkbox would disable the text input because <input ...> would match the selector defined by the data-check-disables="input" attribute.

In the following HTML the <select> and <input type="text"...> elements would be disabled when the checkbox is toggled:

<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'));
    });

  });
});

Demo: http://jsfiddle.net/Hv3V4/21/

Upvotes: 1

Johan &#214;brink
Johan &#214;brink

Reputation: 143

Using jquery you could do something like this 

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

Upvotes: 0

pktangyue
pktangyue

Reputation: 8524

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

This is the jQuery code.

Demo is here http://jsfiddle.net/Hv3V4/17/

Upvotes: 4

Related Questions