jquery отключил селектор ввода не выбирая div или выберите списки - PullRequest
Новая
       7

jquery отключил селектор ввода не выбирая div или выберите списки

1 голос
/ 09 сентября 2011

Я использую следующий оператор 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. 

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

Но когда я пытаюсь добавить ключевое слово disabled, он больше не выбирает мой отключенный div. 

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

1 Ответ

1 голос
/ 09 сентября 2011

Обновлен:

Вот подход, который должен работать: 

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

Обратите внимание на использование псевдоселекторов :input и :disabled. :input будет в основном выбирать все поля формы (не только теги <input/>), а :disabled обеспечивает более пуленепробиваемый способ обнаружения отключенных полей (он будет обрабатывать disabled="disabled", disabled="true" или просто disabled).

Я не уверен, какое поведение вы должны ожидать от элемента .ms-crm-RadioButton. Это, очевидно, не нативный элемент управления, но предоставленный код по крайней мере изменит атрибуты disabled и readonly, как указано. <Ч /> Редактировать: Поведение, которое вы видите с помощью селекторов выше, правильное: 

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

Этот селектор состоит из двух частей: input и :disabled. Часть input говорит, что нужно выбрать ТОЛЬКО теги типа <input/>. Это, очевидно, исключает теги типа <select/> или <div/>. Часть :disabled просто фильтрует выбор тегов <input/> до тех, которые также отключены. 

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

Этот селектор по сути тот же, что и выше, но работает с тегами <select/> вместо тегов <input/>. 

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

Довольно понятно ... 

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

Этот селектор здесь на самом деле не имеет большого смысла. <div/> теги на самом деле не являются элементами ввода, поэтому семантически не имеет смысла их отключать. В приведенной выше разметке я вижу, что у вас действительно установлен атрибут disabled для <div/>, но на самом деле это ничего не «отключает», потому что это недопустимый атрибут для <div/>.

С учетом вышесказанного атрибут disabled все еще существует (допустимый или нет) и может использоваться в селекторе. Мы просто не сможем использовать псевдоселектор :disabled, потому что элемент на самом деле не отключен. Мы можем, однако, написать селектор, который просто ищет необработанное присутствие этого атрибута, например: 'div[disabled]'.

Итак, учитывая, что нам нужно выбрать теги <input/>, <select/> и <div/>, которые все отключены (или, по крайней мере, имеют отключенный атрибут), мы можем написать селектор следующим образом: 

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

* Ранее я описывал псевдоселектор :input.

Используя этот селектор, мы можем удалить атрибут disabled и установить атрибут readonly для всех совпадающих элементов следующим образом: 

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

Обратите внимание, что приведенное выше утверждение должно вести себя точно так, как описано, но имейте в виду, что атрибуты disabled и readonly не имеют внутреннего значения для тегов <div/>, поэтому я не ожидаю, что вы заметите какие-либо заметные различия в те.

...