Jquery adding a required attribute on nearest element class

Question

I am attempting to add a require attribute to a closest textarea when my radio field value is NO, I know you can target this specifically but my checklist has a 15 items and I don't want to repeat each function.

My code is below, I am able to get the value but it does not add a required attribute any of the closest textarea.

My HTML

<tr>
    <td width="10">1</td>
    <td width="650">Does the stencil follow the standard size?</td>
    <td width="10"><label><input type="radio" name="q1" value="YES" required></label></td>
    <td width="10"><label><input type="radio" name="q1" value="NO" class="noq"></label></td>
    <td width="10"><label><input type="radio" name="q1" value="N/A"></label></td>
    <td><textarea rows='1' class='autoExpand' name="remarks_q1"></textarea></td>
</tr>

My jQuery

$('.noq').on('click', function(e) {
    if(e.currentTarget.value == 'NO'){
        $(this).parent().closest('.autoExpand').prop('required',true);
    }else{
        $(this).parent().closest('.autoExpand').prop('required',false);
    }

    console.log(e.currentTarget.value);
});

My console log give the correct value, I also tried the prop but no luck, any suggestion would be great! Thanks in advance!

AGB · Accepted Answer · 2017-08-04 08:08:47Z

2

The JQuery closest method searches up the DOM tree, so you can't use it here to find the text area.

Try something like the below, which will search up the DOM tree to find the closest tr and then down the DOM tree to find your textarea.

$(this).closest('tr').find('.autoExpand').prop('required',true);

answered Aug 4, 2017 at 8:08

AGB

2,45723 silver badges39 bronze badges

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

Comments

Milan Chheda · Accepted Answer · 2017-08-04 08:16:17Z

I have added a required class to understand the change, also have added .noq class to radio buttons, as that was missing. And removed the else condition as that can be avoided. Instead of using parent(), you should be using closes() to get closest tr:

$('.noq').on('click', function(e) {
  $(this).closest('tr').find('.autoExpand').prop('required', false).removeClass('required');
  if (e.currentTarget.value == 'NO') {
    $(this).closest('tr').find('.autoExpand').prop('required', true).addClass('required');
  }
});

.required {
  border: 1px solid #d00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td width="10">1</td>
      <td width="650">Does the stencil follow the standard size?</td>
      <td width="10"><label><input type="radio" name="q1" value="YES" class="noq" required></label></td>
      <td width="10"><label><input type="radio" name="q1" value="NO" class="noq"></label></td>
      <td width="10"><label><input type="radio" name="q1" class="noq" value="N/A"></label></td>
      <td><textarea rows='1' class='autoExpand' name="remarks_q1"></textarea></td>
    </tr>
  </tbody>
</table>

Collectives™ on Stack Overflow

Jquery adding a required attribute on nearest element class

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related