Adaptive Form|Disable selective item inside a radio button group




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.


Sample Script:



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


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



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