使用jQuery检查无线电时，检查是否检查无线电不起作用

Question

I need to dynamically set textarea as required or not but it doesn't want to work properly. JQuery check it itself but then can't check if it's checked or not. But when you clicked inside the second radio, the textarea is always required. I tried many times to make it works but it's still buggy. I have added "attr" and "removeAttr" because I read on stackoverflow that sometimes '.prop('required',false);' doesn't work but still no luck.

I made a fiddle with my problem. jsFiddle

$(".parent-div").click(function() {
    $(this).next().slideToggle();
    var a = $(this).next();
    $('.child-div').not(a).slideUp();
    $(this).find("input").prop( "checked", true );
});
$("#my-radio").change(function() {
if(this.checked) {
    $("#my-textarea").prop('required',true);
$("#my-textarea").attr('required');
}
else {
    $("#my-textarea").prop('required',false);
$("#my-textarea").removeAttr('required');
}
});

Answer 1

You dont need the change event of #my-radio . You can do it in .parent-div click event like following.

$(".parent-div").click(function () {
    $(this).next().slideToggle();
    var a = $(this).next();
    $('.child-div').not(a).slideUp();

    //i have added this
    var checkbox = $(this).find("input");
    checkbox.prop("checked", true);
    $("#my-textarea").prop('required', checkbox.val() == 'second');
});

UPDATED FIDDLE

Answer 2

Thank you, Azim . User adeneo gave me also a solution, you can find it here: https://jsfiddle.net/h8bwqpyb/6/

$(".parent-div").click(function() {
$(this).next().slideToggle();
var a = $(this).next();
$('.child-div').not(a).slideUp();
var inp = $(this).find("input").prop("checked", true);
$("#my-textarea").prop('required', inp.attr('id') === 'my-radio');
});

Both solutions work great but I finally choose the solution of adeneo because it doesnt' use 'value' to work.

Many thanks to both you, guys! Have a nice day! :)