ScottRookie ScottRookie - 8 days ago 7
CSS Question

Disable select element on specific radio button check

I'm trying to disable the "select" when "color1,color2 and color3" button is selected. And I wanted to enable it when the "color4" radio button was checked. I went to different resources and got confused how to put it in my codes.

here's my HTML:

<br> <input type="radio" id="color1" name="color" value="orange" onchange="display()" />
<br> <input type="radio" id="color2" name="color" value="white" onchange="display()" />
<br> <input type="radio" id="color3" name="color" value="red" onchange="display()" />

// when checked, the select must be enable
<br> <input type="radio" id="color4" name="color" value="other" onchange="display()" />
<select id="other_color" onchange="display()" />
<option value="black">black</option>
<option value="pink">pink</option>
<option value="green">Green</option> </select>
<div id="color_display" height="100px" width="100px"></div>


Now for my Js:

function display(){
if(document.getElementById('color1').checked){
document.getElementById('color_display').innerHTML = " Orange"; }
if(document.getElementById('color2').checked){
document.getElementById('color_display').innerHTML = " White"; }
if(document.getElementById('color3').checked){
document.getElementById('color_display').innerHTML = " Red"; }

if (document.getElementById('other_color').value == black') {
document.getElementById('color_display').innerHTML = " Black"; }

if (document.getElementById('other_color').value == 'pink') {
document.getElementById('color_display').innerHTML = " Pink"; }

if (document.getElementById('other_color').value == 'green') {
document.getElementById('color_display').innerHTML = " Green";}
}


I haven't include the "color4" since it won't display anything, I want it to trigger to enable the selection.
Should I change or create another JS for checking? I'm not sure where to start.

Answer

From what I understood. You can make the following changes in your JS code.

document.getElementById("other_color").disabled = true;//disabling the select tag initially;

function display() {
  if (document.getElementById('color1').checked) {
    document.getElementById('color_display').innerHTML = " Orange";
  }
  if (document.getElementById('color2').checked) {
    document.getElementById('color_display').innerHTML = " White";
  }
  if (document.getElementById('color3').checked) {
    document.getElementById('color_display').innerHTML = " Red";
  }

  if (document.getElementById('color4').checked) {
    document.getElementById('other_color').disabled = false;//enable the select tag when the radio 4th radio gets checked

    if (document.getElementById('other_color').value == 'black') {
      document.getElementById('color_display').innerHTML = " Black";
    }

    if (document.getElementById('other_color').value == 'pink') {
      document.getElementById('color_display').innerHTML = " Pink";
    }

    if (document.getElementById('other_color').value == 'green') {
      document.getElementById('color_display').innerHTML = " Green";
    }
  }
}
Comments