document.getElementById - Issue in making the text box readOnly and greyed out using java script-CodePudding

I have to decide between a situation involving Unicast and Multicast.

When I enable the check box, I need to make sure the stream type I've selected is Unicast or Multicast.

if Multicast is being used, the checkbox should be left blank with empty String.

if Unicast is being Used ,the current textbox should be made read-only and should be greyed out.

toggler = document.getElementsByName("currentEntry.enableCB");
 var srcIp = document.getElementById("sourceIp");
 var input_stream_type = document.getElementsByName("currentEntry.streamType")[0];
 if(toggler[0].checked ){
 
    if(input_stream_type.value === 'Multicast'){
                                
              srcIp.style.display = ''; //It shows the textbox with empty string so that we can fill in the data - Expected and working fine
    } else {
    
               //srcIp1.readOnly = true;
               //srcIp1.setAttribute("readOnly","true");
               srcip1.setAttribute('readOnly','readOnly'); //The text box should be read-only in this case and should be greyed out, yet all three options hide the textbox.
    }
 } else {
         srcip1.style.display = 'none'; //It hides the text box - expected and working fine
 }

Could someone shed some lights on how to display the textbox in read-only mode with greyed out mode when the Unicast option selected ?

CodePudding user response：

HTML buttons, inputs, and textareas have an attribute which allows them to be read-only, but the word used for it is "disabled". If you have an <input/> tag that has the attribute "disabled" like so: <input disabled />, then the result is your desired grayed-out read-only mode. I have included an example below which uses an element's "setAttribute()" and "removeAttribute()" methods below to add the "disabled" attribute to a checkbox, an input, and a textarea (the disabled attribute doesn't need to be set to "true", but it may be helpful for the example). For more information on these methods and the "disabled" attribute, click any of the hyperlinks in the paragraph to visit W3Schools' references. Hopefully this information is useful to you!

function toggleReadWrite(element) {
 if(element.getAttribute('disabled') != null) {
  element.removeAttribute('disabled');
 } else {
  // Setting the element's "checked" attribute to false only applies to checkbox inputs. This is optional.
  element.checked = false;
  element.setAttribute('disabled', true);
 }
}

<!DOCTYPE html>
<html>
 <head>
 </head>
 <body>
  <button onclick="toggleReadWrite(document.getElementById('my-checkbox'));">Toggle Me!</button>
  <input type='checkbox' id='my-checkbox'/><label for='my-checkbox'>Check Me!</label>
  <br>
  <button onclick="toggleReadWrite(document.getElementById('my-input'));">Toggle Me!</button>
  <input id='my-input'/>
  <br>
  <button onclick="toggleReadWrite(document.getElementById('my-textarea'));">Toggle Me!</button>
  <textarea id='my-textarea'></textarea>
 </body>
</html>

CodePudding user response：

I have created a fiddle which approaches your requirements with unicast and multicast and I'm using the hidden attribute.

function toggle() {
    let mode = document.querySelector("[name=stream-type]:checked").value;
    let interesting = document.getElementById("interesting");
    let interestingText = document.getElementById("interesting-text");
    let operation = ((mode === 'unicast') ? 'set' : 'remove')   'Attribute';
    if (mode === 'multicast') {
        interesting.checked = false;
        interestingText.value = "";
    }
    interesting[operation]("disabled", "disabled");
    interestingText[operation]("disabled", "disabled");
}

<!--


I have to decide between a situation involving Unicast and Multicast.

When I enable the check  box, I need to make sure the stream type I've selected is Unicast or Multicast.

if Multicast is being used, the checkbox should be left blank with empty  String.          

if Unicast is being Used ,the current textbox should be made read-only and should be greyed out.
-->

<input type="button" value="toggle" onclick="toggle()">
<label>
    InterestingCheckbox
    <input id="interesting" type="checkbox">
</label>
Stream Type
<label>
    Unicast<input name="stream-type" type="radio" value="unicast" checked>
</label>
<label>
    Multicast<input name="stream-type" type="radio" value="multicast">
</label>
<br>
<textarea id="interesting-text"></textarea>