0

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>
Improve this question
3
  • Not related to your question but why create a table from <div>s when you could just use a <table>? There is normally no point in re-inventing the wheel... Commented Jan 11, 2013 at 9:25
  • @boz That is my task to create a table using div. Commented Jan 11, 2013 at 9:27
  • Then thanks for your comments.. That is my task, i can't change it :) Commented Jan 11, 2013 at 9:32

3 Answers 3

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

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

how to disable the textbox if the checkbox is checked, when the page is loading ?
You might consider using .prop(...) instead of .attr(...).
@tiffon is there any advantage by using .prop(..) instead of .attr(...) ??
1

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/

Improve this answer

1 Comment

Wow.. It's really like a tutorial for a beginner like me... Thanks for your effort.. :)
0

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");  
});
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.