Disable radiobutton based on previous radiobutton selection

Question

in my html page my user should not be able to choose the same color in the first and the second section. For example if in Color 1 pink_main in Color 2 pink_other should be disabled and grayed out. This is my code and is not working. Any help would be appreciated.

HTML

Javascript

function process(rb) {

   //clearing previos disabled
   for (i = 0; i < document.getElementsByName("other").length; i++) {
       document.getElementsByName("other")[i].disabled = '';
   }
   document.getElementById(rb.id.replace('main','other')).disabled='disabled';
 }

user_14475852 · Answer

First Example:

var main = document.getElementsByName('main');
var other = document.getElementsByName('other');
main.forEach(m => {
  let mLabel = m.id.split('_')[0];
  m.onchange = function(evt) {
    other.forEach(o => {
      let oLabel = o.id.split('_')[0];
      o.disabled = '';
      if (mLabel == oLabel) {
        o.disabled = 'disabled';
      }
    })
  }
})

Second Example:

function disableRadio(r, rIdx, radios) {
  let rLabel = r.id.split('_')[0];
  r.onchange = function(evt) {
    radios.forEach((r2, r2Idx) => {
      let r2Label = r2.id.split('_')[0];
      r2.disabled = '';
      if (rLabel == r2Label) {
        r2.disabled = 'disabled';
      }
    })
  }
}

var main = document.getElementsByName('main');
var other = document.getElementsByName('other');
main.forEach((m, mIdx) => disableRadio(m, mIdx, other))

Disable radiobutton based on previous radiobutton selection

1 Answers