Disable radiobutton based on previous radiobutton selection-CodePudding

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

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">

<div class="card">
  <div class="card-body">
    <label> Colore 1</label>
        <div id="showchartcolor">
            <div class="showchartcolor">
                <label for="pink_main"> <i style="font-size: 48px; color: #ff829d;" class="fa fa-square"></i></label>
                <input type="radio" id="pink_main" name="main" value="#ff829d">
            </div>
            <div class="showchartcolor">
                <label for="yellow_main">  <i style="font-size: 48px; color: #ffd778;" class="fa fa-square"></i></label>
                <input type="radio" id="yellow_main" name="main" value="#ffd778">
            </div>
                <div class="showchartcolor">
                <label for="green_main">  <i style="font-size: 48px; color: #7dd483;" class="fa fa-square"></i></label>
                <input type="radio" id="green_main" name="main" value="#7dd483">
            </div>

        </div>

       
    <label> Color 2</label>
        <div id="showchartcolor">
            <div class="showchartcolor">
                <label for="pink_other"> <i style="font-size: 48px; color: #ff829d;" class="fa fa-square"></i></label>
                <input type="radio" id="pink_other" name="other" value="#ff829d">
            </div>
            <div class="showchartcolor">
                <label for="yellow_other">  <i style="font-size: 48px; color: #ffd778;" class="fa fa-square"></i></label>
                <input type="radio" id="yellow_other" name="other" value="#ffd778">
            </div>            
                <div class="showchartcolor">
                <label for="green_other">  <i style="font-size: 48px; color: #7dd483;" class="fa fa-square"></i></label>
                <input type="radio" id="green_other" name="other" value="#7dd483">
            </div>

        </div>
  </div>

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

CodePudding user response：

First Example:

var main = document.getElementsByName('main');
var other = document.getElementsByName('other');
main.forEach((m, mIdx) => {
  m.onchange = function(evt) {
    other.forEach((o, oIdx) => {
      o.disabled = '';
      if (m.checked && oIdx == mIdx) {
        o.disabled = 'disabled';
      }
    })
  }
})

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">

<div class="card">
  <div class="card-body">
    <label> Colore 1</label>
    <div id="showchartcolor">
      <div class="showchartcolor">
        <label for="pink_main"> <i style="font-size: 48px; color: #ff829d;" class="fa fa-square"></i></label>
        <input type="radio" id="pink_main" name="main" value="#ff829d">
      </div>
      <div class="showchartcolor">
        <label for="yellow_main"> <i style="font-size: 48px; color: #ffd778;" class="fa fa-square"></i></label>
        <input type="radio" id="yellow_main" name="main" value="#ffd778">
      </div>
      <div class="showchartcolor">
        <label for="green_main"> <i style="font-size: 48px; color: #7dd483;" class="fa fa-square"></i></label>
        <input type="radio" id="green_main" name="main" value="#7dd483">
      </div>

    </div>


    <label> Color 2</label>
    <div id="showchartcolor">
      <div class="showchartcolor">
        <label for="pink_other"> <i style="font-size: 48px; color: #ff829d;" class="fa fa-square"></i></label>
        <input type="radio" id="pink_other" name="other" value="#ff829d">
      </div>
      <div class="showchartcolor">
        <label for="yellow_other"> <i style="font-size: 48px; color: #ffd778;" class="fa fa-square"></i></label>
        <input type="radio" id="yellow_other" name="other" value="#ffd778">
      </div>
      <div class="showchartcolor">
        <label for="green_other"> <i style="font-size: 48px; color: #7dd483;" class="fa fa-square"></i></label>
        <input type="radio" id="green_other" name="other" value="#7dd483">
      </div>

    </div>
  </div>
</div>

Second Example:

function disableRadio(r, rIdx, radios) {
  r.onchange = function(evt) {
    radios.forEach((r2, r2Idx) => {
      r2.disabled = '';
      if (r.checked && r2Idx == rIdx) {
        r2.disabled = 'disabled';
      }
    })
  }
}

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

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">

<div class="card">
  <div class="card-body">
    <label> Colore 1</label>
    <div id="showchartcolor">
      <div class="showchartcolor">
        <label for="pink_main"> <i style="font-size: 48px; color: #ff829d;" class="fa fa-square"></i></label>
        <input type="radio" id="pink_main" name="main" value="#ff829d">
      </div>
      <div class="showchartcolor">
        <label for="yellow_main"> <i style="font-size: 48px; color: #ffd778;" class="fa fa-square"></i></label>
        <input type="radio" id="yellow_main" name="main" value="#ffd778">
      </div>
      <div class="showchartcolor">
        <label for="green_main"> <i style="font-size: 48px; color: #7dd483;" class="fa fa-square"></i></label>
        <input type="radio" id="green_main" name="main" value="#7dd483">
      </div>

    </div>


    <label> Color 2</label>
    <div id="showchartcolor">
      <div class="showchartcolor">
        <label for="pink_other"> <i style="font-size: 48px; color: #ff829d;" class="fa fa-square"></i></label>
        <input type="radio" id="pink_other" name="other" value="#ff829d">
      </div>
      <div class="showchartcolor">
        <label for="yellow_other"> <i style="font-size: 48px; color: #ffd778;" class="fa fa-square"></i></label>
        <input type="radio" id="yellow_other" name="other" value="#ffd778">
      </div>
      <div class="showchartcolor">
        <label for="green_other"> <i style="font-size: 48px; color: #7dd483;" class="fa fa-square"></i></label>
        <input type="radio" id="green_other" name="other" value="#7dd483">
      </div>

    </div>
  </div>
</div>