3

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');
}
});
joryl
  • 129
  • 3
  • 19
  • `attr` accepts 2 arguments while assigning... – Rayon Feb 17 '16 at 12:47
  • As long as the property is set, there's no need to set the attribute, how are you checking if the textarea is `required`, are you trying to submit the form, or just looking at the HTML ? – adeneo Feb 17 '16 at 12:48
  • On page I will send the form but now I need to make it working. When I want to send 'First' and textarea is 'required' it wants to write something there. That's why I want to change this attribute dynamically. – joryl Feb 17 '16 at 12:51
  • A similar question already answered: http://stackoverflow.com/questions/6654601/jquery-if-radio-button-is-checked – Sune S.-T. Feb 17 '16 at 12:51
  • But there you click inside radio, in my fiddle you can click outside and scripts also can check a radio. – joryl Feb 17 '16 at 12:53
  • The issue is that only one radio matches the ID `my-radio`, the other one doesn't, so the event handler *only* runs when the second radio is clicked, it doesn't run when the first radio is clicked – adeneo Feb 17 '16 at 12:53
  • Can you edit my fiddle, please? The textarea should be required only when second radio is checked. – joryl Feb 17 '16 at 12:55
  • 2
    Sure -> https://jsfiddle.net/h8bwqpyb/6/ – adeneo Feb 17 '16 at 12:59

2 Answers2

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

Ibrahim Khan
  • 20,616
  • 7
  • 42
  • 55
0

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! :)

Community
  • 1
  • 1
joryl
  • 129
  • 3
  • 19