CODEWITHSUNDEEP
javascripthtmlcss
Poofbrayy
Poofbrayy

Reputation: 21

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.

Upvotes: 0

Views: 941

Answers (3)

nyedidikeke
nyedidikeke

Reputation: 7618

Based on your post and the information I deduce from your comment on your initial post and answers, I thing you are trying to achieve what I've replicated in the spinet below:

Instead of showing the select option by default, hide it so as to only show it when the color4 radio button is select so as to make it more user friendly for an improved User Experience.

var color = document.querySelectorAll('input[name="color"]'),
    displaySelectedColour = document.getElementById("color_display"),
    selectOption = document.getElementById("other_color");
  
for (var i in color) {
    color[i].onclick = function() {
        if (document.getElementById('color1').checked == true) {
            displaySelectedColour.style.display = "block";
            displaySelectedColour.innerText = "Orange";
            selectOption.style.display = "none";
        }
        if (document.getElementById('color2').checked == true) {
            displaySelectedColour.style.display = "block";
            displaySelectedColour.innerText = "White";
            selectOption.style.display = "none";
        }
        if (document.getElementById('color3').checked == true) {
            displaySelectedColour.style.display = "block";
            displaySelectedColour.innerText = "Red";
            selectOption.style.display = "none";
        }
        if (document.getElementById('color4').checked == true) {
            displaySelectedColour.style.display = "none";
            selectOption.style.display = "block";
        }
    };
}
<input type="radio" id="color1" name="color" value="orange">
<br><input type="radio" id="color2" name="color" value="white">
<br><input type="radio" id="color3" name="color" value="red">
<br><input type="radio" id="color4" name="color" value="other">

<!-- Select disabled by default and enabled only on color4 radio button check -->
    <br>
    <select id="other_color" style="display: none;">
    <option disabled selected value>-- Select one --</option>
             <option>black</option>
             <option>pink</option>
             <option>green</option>
    </select>
    <div id="color_display" height="100px" width="100px"></div>

Upvotes: 0

Anadi
Anadi

Reputation: 754

please change your js like that.

function display() {
        if (document.getElementById('color4').checked) {
            document.getElementById("other_color").disabled = true;
        }
        else{
            document.getElementById("other_color").disabled = false;
        }
  }

Upvotes: 0

fullmetal
fullmetal

Reputation: 414

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

Upvotes: 2

Related Questions