2016-11-27 15 views
0

"color1、color2 and color3"ボタンが選択されているときに "選択"を無効にしようとしています。そして、 "color4"ラジオボタンがチェックされたときに有効にしたかったのです。私は別のリソースに行って、自分のコードに入れる方法を混乱させました。ここ特定のラジオボタンチェックで選択要素を無効にする

は私のHTMLです:私のJsのための今

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

​​

それは何も表示されませんので、私はそれがトリガーする、 "color4" が含まれていません選択を有効にします。 チェックのために別のJSを変更または作成する必要がありますか?どこから始めたらいいか分からない。

+0

「そして、私は右のラジオボタンをチェックしたときにそれを有効にしたかったのです。」 - 右のラジオボタンではどういう意味ですか?私。それがチェックされるとドロップダウンで同じ色を表示したいですか? ii。 「その他」のラジオボタンが選択されている場合は、ドロップダウンを無効にしますか? – Anadi

+0

申し訳ありません、申し訳ありませんが、ここでは、「color1、color2 and color3」ボタンが選択されているときに「選択」を無効にしているとします。そして、 "color4"ラジオボタンがチェックされたときに有効にしたかったのです。 – Poofbrayy

答えて

2

私が理解したところから。 JSコードで次の変更を加えることができます。

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

ありがとうございました! – Poofbrayy

0

このようにjsを変更してください。

代わりの表示:あなたのポストと私はあなたの最初のポストと答えにあなたのコメントから推測情報、あなたは私は以下のスピネルに複製した内容を達成しようとしている私の事に基づいて

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

ドロップダウンで選択した色を表示したい場合はお知らせください。 – Anadi

0

デフォルトではselectオプションで、color4ラジオボタンが選択されている場合にのみ表示されるように非表示にして、ユーザーエクスペリエンスを向上させるためにユーザーフレンドリーにします。

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>

関連する問題