CODEWITHSUNDEEP
jquerytraversal
bonum_cete
bonum_cete

Reputation: 4962

Traversing the dom, finding the closest previous checkbox

I am trying to traverse the dom in the code below and just having a block mentally. I would like to enable the checkbox in the previous .form-input-wrapper.

<div>
  <div class="form-input-wrapper inline-radio-buttons">
    <span class="button-label">Setup - Ready</span>
    <span>
      <input id="status_0" name="status[0]" type="hidden" value="setup_ready">           
      <input checked="checked" disabled="disabled" id="status_0" name="status[0]" type="checkbox" value="setup_ready">
    </span>
  </div>
  <div class="form-input-wrapper inline-radio-buttons">
    <span class="button-label">Setup - Required</span>
    <span>
      <input id="status_1" name="status[1]" type="hidden" value="setup_required">
      <input checked="checked" disabled="disabled" id="status_1" name="status[1]" type="checkbox" value="setup_required">
    </span>
  </div>
</div>

I've tried a number of things. This is what I currently doing:

(NOTE: this is for context) Basically I have a column of checkboxes. If they are checked they are disabled, except for the last one. if you uncheck the last one, I want to enable the checkbox above.

$(@checkboxes).live 'click', ->
  if $(this).is(':checked')
    return
  else
    console.log "$(this).parents() ", $(this).parent().prev().has(':checkbox').first().find(':checkbox')
    console.log $(this)
    $(this).parent().prev().has(':checkbox').first().find(':checkbox').disabled = false
    return

if I log:

$(this).parent().prev().has(':checkbox').first().find(':checkbox')

this log will just print out the element I clicked on.

Upvotes: 0

Views: 408

Answers (4)

Anthony Carbon
Anthony Carbon

Reputation: 618

Use the .removeAttr('checked') if click.

Sample :

$('input').bind('click', function () {  
$('.inline-radio-buttons').last().find('input').removeAttr('disabled').removeAttr('checked');
});

Upvotes: 0

Matteo B.
Matteo B.

Reputation: 4074

I changed the following to bring it to work:

  • Use closest instead of parent as it is more stable because you can nest as much as you want then.
  • Do not use first at that point, because prev will return 1 or 0 elements. The first changes nothing.
  • Added an element to the HTML, that does not have disabled="disabled"
  • Changed .disabled = false to .removeAttr('disabled') (I think .disabled = false would not work)

jQuery(window).ready(function() {
  $(':checkbox').live('click', function() {
    if($(this).is(':checked'))
      return;
    $(this).closest(".form-input-wrapper").prev().has(':checkbox').find(':checkbox').removeAttr('disabled');
    return;
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div>
  <div class="form-input-wrapper inline-radio-buttons">
    <span class="button-label">Setup - Ready</span>
    <span>
      <input id="status_0" name="status[0]" type="hidden" value="setup_ready">           
      <input checked="checked" disabled="disabled" id="status_0" name="status[0]" type="checkbox" value="setup_ready">
    </span>
  </div>
  <div class="form-input-wrapper inline-radio-buttons">
    <span class="button-label">Setup - Required</span>
    <span>
      <input id="status_1" name="status[1]" type="hidden" value="setup_required">
      <input checked="checked" disabled="disabled" id="status_1" name="status[1]" type="checkbox" value="setup_required">
    </span>
  </div>
  <!-- Element inserted by me to be able to test one without disabled="disabled" -->
  <div class="form-input-wrapper inline-radio-buttons">
    <span class="button-label">Setup - 3</span>
    <span>
      <input id="status_2" name="status[2]" type="hidden" value="setup_required">
      <input checked="checked" id="status_2" name="status[2]" type="checkbox" value="setup_required">
    </span>
  </div>
</div>

Upvotes: 1

Barmar
Barmar

Reputation: 781235

You need to go up 2 levels, but I consider it better to use .closest() to specify a selector, rather than hard-coding the number of levels in the code.

For the first, use:

$(this).closest(".inline-radio-buttons").siblings().first().find(":checkbox").prop("disabled", false);

For the previous, use:

$(this).closest(".inline-radio-buttons").prev().find(":checkbox").prop("disabled", false);

Upvotes: 1

user3155561
user3155561

Reputation:

did you try $(this).parentsuntil('elem')?

Upvotes: 0

Related Questions