Home/ Questions/Q 6558383
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T13:11:33+00:00

I’m using the following jquery statement to try to change inputs on a form

  • 0

I’m using the following jquery statement to try to change inputs on a form that are disabled to read only instead

$('input[disabled="true"]').attr('readonly', 'readonly').prop("disabled",false);

This works for most controls, but a few controls are still disabled. Here is one

<select name="new_optionset" tabIndex="1100" disabled="" 
  class="ms-crm-SelectBox " id="new_optionset" style="ime-mode: auto;" 
  _events="[object Object]" control="[object Object]" attrPriv="7" 
  attrName="new_optionset" req="0" defaultSelected="100000000">

And here is another 

<div disabled="" class="ms-crm-RadioButton" id="new_bitfield2options" 
  style="ime-mode: auto;" control="[object Object]" attrPriv="7" 
  attrName="new_bitfield2options" req="0" atype="Boolean" 
  onchangeHandler="function(){fExistingHandler();fNewHandler()}" 
  onfocusHandler="function(){}">

Can you help me get these controls read only instead of disabled?

Here is a sample I mocked up to show how the input selector doesn’t select the html select element.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="JQuery1.WebForm2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

    <script src="js/jquery-1.3.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function() {

        $("input").css("border","3px solid red");
    });


    </script>

    <script type="text/javascript">

    </script>

    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <select name="new_optionset" tabindex="1100" disabled="" class="ms-crm-SelectBox "
            id="new_optionset" style="ime-mode: auto;">
            <asp:TextBox runat="server"></asp:TextBox>
    </div>
    </form>
</body>
</html>

I’ve been playing with this some more and found what seems to me to be very strange behavior.

This selector will select most inputs such as text boxes, but will not select Div’s or the html select element (Dropdown)

$('input:disabled').css("border","3px solid red");

This selector allows me to select the disabled html select elements

$('select:disabled').css("border", "3px solid red");

So I try the same approach to Div’s. I can select all div’s using this statement

$('div').css("border", "3px solid red");

But when I try to add the disabled keyword, it no longer selects my disabled div.

$('div:disabled').css("border", "3px solid red");
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Updated:

    Here’s an approach that should work:

    $(':input:disabled, .ms-crm-RadioButton[disabled]')
    .attr('readonly', 'readonly').removeAttr('disabled');

    Note the use of the :input and :disabled pseudo-selectors. :input will basically select all form fields (not just <input/> tags), and :disabled provides a more bullet-proof way of detecting disabled fields (it’ll handle disabled="disabled", disabled="true", or simply disabled).

    I’m not sure what behavior you should expect from the .ms-crm-RadioButton element. It’s obviously not a native control, but the provided code will at least change the disabled and readonly attributes as specified.

    Edit:
    The behavior you’re seeing with the selectors above is correct:

    $('input:disabled').css("border","3px solid red");

    This selector is comprised of two parts: input and :disabled. The input part says to select ONLY tags of type <input/>. This obviously excludes tags of type <select/> or <div/>. The :disabled part simply filters down the selection of <input/> tags to those that are also disabled.

    $('select:disabled').css("border", "3px solid red");

    This selector is essentially the same as above, but operating on <select/> tags instead of <input/> tags.

    $('div').css("border", "3px solid red");

    Pretty self explanatory…

    $('div:disabled').css("border", "3px solid red");

    This selector here doesn’t actually make a lot of sense. <div/> tags aren’t actually input elements, so semantically it doesn’t make sense to disable one. In the markup you provided above, I can see that you did indeed have a disabled attribute set on a <div/>, but this doesn’t actually “disable” anything, because it’s an invalid attribute for <div/>‘s.

    With that said, the disabled attribute is still there (valid or not), and can be used in a selector. We just won’t be able to use the :disabled pseudo-selector, because the element isn’t really disable. We can, however, write a selector that just looks for the raw presence of that attribute, like this: 'div[disabled]'.

    So given that we need to select <input/>, <select/>, and <div/> tags that are all disabled (or at least have a disabled attribute), we can write a selector like this:

    $(':input:disabled, div[disabled]')

    *I previously described the :input pseudo-selector above.

    Using this selector, we can remove the disabled attribute and set the readonly attribute on all of the matched elements like this:

    $(':input:disabled, div[disabled]')
    .attr('readonly', 'readonly').removeAttr('disabled');

    Please note that the statement above should behave exactly as described, but be aware that disabled and readonly attributes have no intrinsic meaning on <div/> tags, so I wouldn’t expect you to see any noticeable difference on those.

    • 0