javascript - 根据先前的单选按钮选择禁用单选按钮

Question

在我的 html 页面中，我的用户不应该能够在第一部分和第二部分中选择相同的颜色。例如，如果在颜色 1pink_main中，颜色 2pink_other应该被禁用并变灰。这是我的代码，不工作。任何帮助，将不胜感激。

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

标签： javascripthtmlcss

Answer 1

第一个例子：

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

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

第二个例子：

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

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