<div>
Hi Howard,<br />
<br />
There are couple of ways, mostly it will rely on how you are going to set criteria. Once you have the list of controls, you could either individually run<br />
<br />

<pre><code class="code-1 nolinks" id="code-20-42046112-1"><span>$(&quot;#controlid&quot;).prop('disabled', true);</span>
</code></pre>
<br />
Or if they are based on a particular class<br />
<br />

<pre><code class="code-1 nolinks" id="code-20-42046112-2"><span>(&quot;input.classname&quot;).attr(&quot;disabled&quot;,&quot;disabled&quot;);</span>
</code></pre>
<br />
Regards,<br />
Chinmay.
</div>


<div>
What about if they are all within a form group and I either add a unique id or add a class to the form group class attribute(s)? &nbsp;It would be nice if I could iterate the controls within and set them all with some loop mechanism. &nbsp;Is this possible also?
</div>


<div>
Your example disables all inputs within the div with class 'divId' , I think. &nbsp;So I would need a similar call for each type of control then, correct?<br />
<br />
Inputs, Buttons, Dropdowns, etc...
</div>


<div>
Hi Howard,<br />
<br />
No the code will disable all the input controls inside a div with id &quot;divid&quot;. It is an ID selector<br />
<br />
Please refer to <a href="https://api.jquery.com/id-selector/" rel="ugc">https://api.jquery.com/id-<wbr />selector/</a><br />
<br />
Regards,<br />
Chinmay.
</div>


<div>
I tried this jQuery statement. &nbsp;It works but all the controls are grayed out which is sort of ok, but I expect to hear that they don't want the graying to occur. &nbsp;Is there any way to avoid that?<br />
<br />
&nbsp; &nbsp; &nbsp;$('.form-group .form-control').attr('disa<wbr />bled', 'true');
</div>


<div>
Hi Howard,<br />
<br />
Yes. You can do it but I strongly suggest against that. It will frustrate end users if they don't realize that the controls are disabled. <br />
<br />
Regards,<br />
Chinmay.
</div>


<div>
I agree, but still, I would like to know how to do that in case (probably when) the customer says, &nbsp;they don't like the way the form looks when the controls are grayed out...
</div>


<div>
Hi Howard,<br />
<br />
You can simply add a stylesheet (same as you disabled the controls) to override default disabled control look.<br />
<br />
Regards,<br />
Chinmay.
</div>


<div>
Do you know specifically what styling I need to apply?
</div>


<div>
Hi Howard,<br />
<br />
No. It is something you will have to decide. Based on the requirements and customer feedback you can decided how would you want to setup disabled look.<br />
<br />
Regards,<br />
Chinmay.
</div>


<div>
Really what I want is for the controls to be readonly, but not have their default style(s) changed beyond that.
</div>


<div>
Hi Howard,<br />
<br />
:) Communication... makes life a LOT easier. If you want to make your control just readonly then there is a way. <br />
Try this code<br />

<pre><code class="code-1 nolinks" id="code-20-42047187-1"><span>$YourForm.find('#divId input').prop(&quot;readonly&quot;, true);</span>
</code></pre>
<br />
Regards,<br />
Chinmay.
</div>


<div>
Hi Chinmay,<br />
<br />
The title of the question is how to make a set of controls on a form read only. &nbsp;How might I have made that more clear. &nbsp;Your solution says:<br />
&quot;you want to make your control just readonly then there is a way. &quot;&nbsp;<br />
<br />
Where exactly was my lack of clarity?
</div>


<div>
Hi Howard,<br />
<br />
You are right. your description talked about read only. I missed that. My bad.<br />
<br />
PS: title still says: Bootstrap form.<br />
<br />
Regards,<br />
Chinmay.
</div>


<div>
<div class="content wysiwyg-content">
Using javascript and/or jQuery, &nbsp;I need to be able to make a set of form controls read only based on some external (user) criteria. &nbsp;What is the recommended method to do so? &nbsp;The form has (buttons, textboxes, date pickers and dropdowns.
</div>
</div>


Using javascript and/or jQuery,  I need to be able to make a set of form controls read only based on some external (user) criteria.  What is the recommended method to do so?  The form has (buttons, textboxes, date pickers and dropdowns.

Bootstrap Form

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and  in almost every mainstream web browser.

JavaScript

Bootstrap is a free and open-source collection of tools for creating websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It aims to ease the development of dynamic websites and web applications. Bootstrap is a front end web framework, that is, an interface for the user, unlike the server-side code which resides on the "back end" or server.

Bootstrap

jQuery (Core) is a cross-browser JavaScript library that provides abstractions for common client-side tasks such as Document Object Model (DOM) traversal, DOM manipulation, event handling, animation and Ajax. jQuery also provides a platform to create plugins that extend jQuery's capabilities beyond those already provided by the library.