Making all the UI form as Readonly/Disable?

Question

Making all the UI form as Readonly/Disable?

1.9k views Asked by Sahil Arora At 10 September 2024 at 17:20

We have a requirement where we need to make all the form input elements as readonly when user access is set as "READ ONLY".

We are using a widget based template approach in our coding, where the widgets are specified in the template HTML and that are used in the corresponding JS file.

I have tried with the following code in my JS postcreate method :

var item=dojo.query("#showtech_log_title_pane"); // id of the content pane

for (var i=0;i{
   dijit.byId(item[i]).set('readOnly',true);
}

Error : dijit by id-> undefined or null

also,

var container = dojo.query("#showtech_log_title_pane");

dojo.query('input', container).forEach(
  function(inputElem){
    inputElem.disabled = 'disabled';
  }
)

Error: Create Element not a method

Original Q&A

There are 1 answers

**Bourbia Brahim** · Answer 1 · 2017-01-10 08:37:34

To disable a widget you have to get a reference to it , and set its disabled attribute to true.

In your case, you have to iterate through all inputs that have ids ( to be sure that's a created widget ) then get enclosing widget of input and set it to disabled

Below a working example :

require([ "dojo/ready", 
    "dojo/query",
          "dijit/registry",
          "dojo/_base/array",
    "dijit/TitlePane", 
    "dojo/domReady!"],
function (ready, query, registry, array, TitlePane) {
 ready(function(){
      //get all 
      var inputs = dojo.query('input', "enclosing_input_div");
      array.forEach(inputs,function(input){
        //check if a it's a created widget input (all widgets have theire own id )
       if(input.id)
          if(registry.byId(input.id)) // recheck if it it has enclosing widget
            registry.byId(input.id).set("disabled",true)
      })
    });
});

<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" rel="stylesheet"/>
<script>
    dojoConfig= {
        parseOnLoad: true,
        async: true
    };
</script>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>

<body class="claro">
  <div id="enclosing_input_div">
    <div id="tp1" data-dojo-type="dijit/TitlePane" data-dojo-props="title: 'tp1'">
      <table>
        <tr>
          <td>TextField :</td>
          <td><input  data-dojo-type="dijit/form/TextBox"></td>
        </tr>
        <tr>
          <td>NumberTextBox :</td>
          <td><input id="numberTextBox" data-dojo-type="dijit/form/NumberTextBox"></td>
        </tr>
        <tr>
          <td>Checkbox :</td>
          <td><input id="checkBox" data-dojo-type="dijit/form/CheckBox"></td>
        </tr>
        <tr>
          <td>RadioButton :</td>
          <td><input id="radioButton" data-dojo-type="dijit/form/RadioButton"></td>
        </tr>
      </table>
    </div>
  </div>
</body>

Here is also a fiddle

TechQA.

Making all the UI form as Readonly/Disable?

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in DOJO

Related Questions in DIJIT.FORM

Popular Questions

Popular Tags

Trending Questions