jquery 禁用输入选择器不选择 div 或选择列表

发布于 2024-12-03 16:49:52 字数 2459 浏览 0 评论 0原文

我正在使用以下 jquery 语句尝试更改禁用为只读的表单上的输入，

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

这适用于大多数控件，但仍有一些控件被禁用。这是一个

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

这是另一个

<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(){}">

你能帮我将这些控件设置为只读而不是禁用吗？

这是我模拟的一个示例，用于展示输入选择器如何不选择 html select 元素。

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

我一直在玩这个，发现在我看来这是非常奇怪的行为。

该选择器将选择大多数输入，例如文本框，但不会选择 Div 或 html 选择元素（下拉）。

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

该选择器允许我选择禁用的 html 选择元素，

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

因此我尝试对 Div 采取相同的方法。我可以使用此语句选择所有 div，

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

但是当我尝试添加禁用关键字时，它不再选择我禁用的 div。

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

原文

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");

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

冬天的雪花 2024-12-10 16:49:52

更新：

这是一种应该可行的方法：

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

注意 :input 和 :disabled 伪选择器的使用。 :input 基本上会选择所有表单字段（不仅仅是标签），而 :disabled 提供了更安全的方式检测禁用字段的方式（它将处理 disabled="disabled"、disabled="true" 或简单地 disabled）。

我不确定 .ms-crm-RadioButton 元素会出现什么行为。它显然不是本机控件，但提供的代码至少会更改指定的 disabled 和 readonly 属性。

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

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

该选择器由两部分组成：input 和 :disabled。 input 部分表示仅选择类型的标签。这显然排除了标记的选择过滤到也被禁用的标记。

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

此选择器本质上与上面相同，但在标记上操作。

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

非常不言自明...

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

这个选择器实际上并没有多大意义。

标签实际上并不是输入元素，因此从语义上讲，禁用它是没有意义的。在您上面提供的标记中，我可以看到您确实在

上设置了 disabled 属性，但这实际上并没有“禁用” " 任何东西，因为它是

的无效属性。

尽管如此，disabled 属性仍然存在（无论是否有效），并且可以在选择器中使用。我们只是无法使用 :disabled 伪选择器，因为该元素并未真正禁用。但是，我们可以编写一个仅查找该属性的原始存在的选择器，如下所示：'div[disabled]'。

因此，考虑到我们需要选择、

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

*我之前描述了上面的 :input 伪选择器。

使用此选择器，我们可以删除禁用属性并在所有匹配元素上设置只读属性，如下所示：

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

请注意，上面的语句的行为应与所描述的完全相同，但请注意 disabled 和 < code>readonly 属性在

标记上没有内在含义，因此我不希望您看到这些属性有任何明显的差异。

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

~没有更多了~