jQuery在最近的元素类上添加必需的属性

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!

Answer 1

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

Answer 2

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>