Highlighted

Adaptive Form|Disable selective item inside a radio button group

Mayank_Gandhi

Employee

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

    }

  }

});