Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

Adaptive Form|Disable selective item inside a radio button group

Avatar

Avatar
Validate 1
Level 10
Mayank_Gandhi
Level 10

Likes

284 likes

Total Posts

1,105 posts

Correct Reply

182 solutions
Top badges earned
Validate 1
Contributor 2
Ignite 5
Ignite 3
Ignite 10
View profile

Avatar
Validate 1
Level 10
Mayank_Gandhi
Level 10

Likes

284 likes

Total Posts

1,105 posts

Correct Reply

182 solutions
Top badges earned
Validate 1
Contributor 2
Ignite 5
Ignite 3
Ignite 10
View profile
Mayank_Gandhi
Level 10

20-08-2018

This is a simple use case but I found a few people having a challenge of using JS or Jquery to achieve this.

We are taking a simple form here which has a Radio Button Group with 3 Items and since the form is re-usable developer would disable 2 of the items on any prefill data. For this example, I am disabling the radio item 1 and 3 on a button(b1) click but you can modify it to be used on Form Initialize as well.

1552727_pastedImage_1.png

Sample Script:

$('.b1').click(function(){

radiobuttongroup.value='opt1';

$('input[value="opt1"]').attr('disabled', 'disabled');

radiobuttongroup.value='opt3';

$('input[value="opt3"]').attr('disabled', 'disabled');

radiobuttongroup.value='';

});

where opt1 and opt3 are the values of the respective radio items Radio 1 and Radio 3. Above script will leave only Radio 2 enabled.

So, I see that Labels still have events associated with it and you can select the radio item with Label even. Sharing a new sample to handle such scenarios:

var radios = $('.radiobuttongroup.guideRadioButtonItem input');

var labels = $('.radiobuttongroup.guideRadioButtonItem .guideWidgetLabel.right');

 

  for(var i=0; i < radios.length; i++){

    if(i === 0){

      $(radios[i]).attr('disabled','disabled');

      $(labels[i]).off('click');

    }

  }

});