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

Mayank_Gandhi
Community Advisor
Community Advisor

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

    }

  }

});

0 Replies