#javascript #html #css
Вопрос:
на моей html-странице мой пользователь не должен иметь возможности выбирать один и тот же цвет в первом и втором разделах. Например, если в цвете 1 pink_main , то в цвете 2 pink_other должно быть отключено и выделено серым цветом. Это мой код, и он не работает. Любая помощь будет признательна.
HTML
lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"gt; lt;div class="card"gt; lt;div class="card-body"gt; lt;labelgt; Colore 1lt;/labelgt; lt;div id="showchartcolor"gt; lt;div class="showchartcolor"gt; lt;label for="pink_main"gt; lt;i style="font-size: 48px; color: #ff829d;" class="fa fa-square"gt;lt;/igt;lt;/labelgt; lt;input type="radio" id="pink_main" name="main" value="#ff829d"gt; lt;/divgt; lt;div class="showchartcolor"gt; lt;label for="yellow_main"gt; lt;i style="font-size: 48px; color: #ffd778;" class="fa fa-square"gt;lt;/igt;lt;/labelgt; lt;input type="radio" id="yellow_main" name="main" value="#ffd778"gt; lt;/divgt; lt;div class="showchartcolor"gt; lt;label for="green_main"gt; lt;i style="font-size: 48px; color: #7dd483;" class="fa fa-square"gt;lt;/igt;lt;/labelgt; lt;input type="radio" id="green_main" name="main" value="#7dd483"gt; lt;/divgt; lt;/divgt; lt;labelgt; Color 2lt;/labelgt; lt;div id="showchartcolor"gt; lt;div class="showchartcolor"gt; lt;label for="pink_other"gt; lt;i style="font-size: 48px; color: #ff829d;" class="fa fa-square"gt;lt;/igt;lt;/labelgt; lt;input type="radio" id="pink_other" name="other" value="#ff829d"gt; lt;/divgt; lt;div class="showchartcolor"gt; lt;label for="yellow_other"gt; lt;i style="font-size: 48px; color: #ffd778;" class="fa fa-square"gt;lt;/igt;lt;/labelgt; lt;input type="radio" id="yellow_other" name="other" value="#ffd778"gt; lt;/divgt; lt;div class="showchartcolor"gt; lt;label for="green_other"gt; lt;i style="font-size: 48px; color: #7dd483;" class="fa fa-square"gt;lt;/igt;lt;/labelgt; lt;input type="radio" id="green_other" name="other" value="#7dd483"gt; lt;/divgt; lt;/divgt; lt;/divgt; Язык JavaScript
function process(rb) { //clearing previos disabled for (i = 0; i lt; document.getElementsByName("other").length; i ) { document.getElementsByName("other")[i].disabled = ''; } document.getElementById(rb.id.replace('main','other')).disabled='disabled'; } Ответ №1:
Первый Пример:
var main = document.getElementsByName('main'); var other = document.getElementsByName('other'); main.forEach(m =gt; { let mLabel = m.id.split('_')[0]; m.onchange = function(evt) { other.forEach(o =gt; { let oLabel = o.id.split('_')[0]; o.disabled = ''; if (mLabel == oLabel) { o.disabled = 'disabled'; } }) } }) lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"gt; lt;div class="card"gt; lt;div class="card-body"gt; lt;labelgt; Colore 1lt;/labelgt; lt;div id="showchartcolor"gt; lt;div class="showchartcolor"gt; lt;label for="pink_main"gt; lt;i style="font-size: 48px; color: #ff829d;" class="fa fa-square"gt;lt;/igt;lt;/labelgt; lt;input type="radio" id="pink_main" name="main" value="#ff829d"gt; lt;/divgt; lt;div class="showchartcolor"gt; lt;label for="yellow_main"gt; lt;i style="font-size: 48px; color: #ffd778;" class="fa fa-square"gt;lt;/igt;lt;/labelgt; lt;input type="radio" id="yellow_main" name="main" value="#ffd778"gt; lt;/divgt; lt;div class="showchartcolor"gt; lt;label for="green_main"gt; lt;i style="font-size: 48px; color: #7dd483;" class="fa fa-square"gt;lt;/igt;lt;/labelgt; lt;input type="radio" id="green_main" name="main" value="#7dd483"gt; lt;/divgt; lt;/divgt; lt;labelgt; Color 2lt;/labelgt; lt;div id="showchartcolor"gt; lt;div class="showchartcolor"gt; lt;label for="pink_other"gt; lt;i style="font-size: 48px; color: #ff829d;" class="fa fa-square"gt;lt;/igt;lt;/labelgt; lt;input type="radio" id="pink_other" name="other" value="#ff829d"gt; lt;/divgt; lt;div class="showchartcolor"gt; lt;label for="yellow_other"gt; lt;i style="font-size: 48px; color: #ffd778;" class="fa fa-square"gt;lt;/igt;lt;/labelgt; lt;input type="radio" id="yellow_other" name="other" value="#ffd778"gt; lt;/divgt; lt;div class="showchartcolor"gt; lt;label for="green_other"gt; lt;i style="font-size: 48px; color: #7dd483;" class="fa fa-square"gt;lt;/igt;lt;/labelgt; lt;input type="radio" id="green_other" name="other" value="#7dd483"gt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt; Второй Пример:
function disableRadio(r, rIdx, radios) { let rLabel = r.id.split('_')[0]; r.onchange = function(evt) { radios.forEach((r2, r2Idx) =gt; { 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) =gt; disableRadio(m, mIdx, other)) lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"gt; lt;div class="card"gt; lt;div class="card-body"gt; lt;labelgt; Colore 1lt;/labelgt; lt;div id="showchartcolor"gt; lt;div class="showchartcolor"gt; lt;label for="pink_main"gt; lt;i style="font-size: 48px; color: #ff829d;" class="fa fa-square"gt;lt;/igt;lt;/labelgt; lt;input type="radio" id="pink_main" name="main" value="#ff829d"gt; lt;/divgt; lt;div class="showchartcolor"gt; lt;label for="yellow_main"gt; lt;i style="font-size: 48px; color: #ffd778;" class="fa fa-square"gt;lt;/igt;lt;/labelgt; lt;input type="radio" id="yellow_main" name="main" value="#ffd778"gt; lt;/divgt; lt;div class="showchartcolor"gt; lt;label for="green_main"gt; lt;i style="font-size: 48px; color: #7dd483;" class="fa fa-square"gt;lt;/igt;lt;/labelgt; lt;input type="radio" id="green_main" name="main" value="#7dd483"gt; lt;/divgt; lt;/divgt; lt;labelgt; Color 2lt;/labelgt; lt;div id="showchartcolor"gt; lt;div class="showchartcolor"gt; lt;label for="pink_other"gt; lt;i style="font-size: 48px; color: #ff829d;" class="fa fa-square"gt;lt;/igt;lt;/labelgt; lt;input type="radio" id="pink_other" name="other" value="#ff829d"gt; lt;/divgt; lt;div class="showchartcolor"gt; lt;label for="yellow_other"gt; lt;i style="font-size: 48px; color: #ffd778;" class="fa fa-square"gt;lt;/igt;lt;/labelgt; lt;input type="radio" id="yellow_other" name="other" value="#ffd778"gt; lt;/divgt; lt;div class="showchartcolor"gt; lt;label for="green_other"gt; lt;i style="font-size: 48px; color: #7dd483;" class="fa fa-square"gt;lt;/igt;lt;/labelgt; lt;input type="radio" id="green_other" name="other" value="#7dd483"gt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt; Комментарии:
1. @PisaPonente если вы добавляете больше цветов в те же две группы, то вам не нужно ничего менять, но если вы добавляете больше групп, вам, возможно, потребуется добавить группу в код.
2. @PisaPonente Я обновил ответ, у меня была одна проблема, что если вы переупорядочите второй список, то он не будет работать