атрибуты для форм

 
0
 
JavaScript
ava
marozz | 19.03.2013, 20:25
Помогите разобраться. Нужно на странице найти все элементы с классом "some" (это будут input ) и установить для них атрибут readonly="readonly"
Признаюсь в javascript почти 0, пишу на php, прошу помощи
Comments (17)
ava
baldina | 19.03.2013, 21:31 #

if(document.getElementsByClassName === undefined) {
    document.getElementsByClassName = function(classList) {           
        var i,j,
        list = document.getElementsByTagName('*'),
        length = list.length,
        classArray = classList.split(/\s+/),
        classes = classArray.length,
        result = [], i,j
        for(i = 0; i < length; i++)
            for(j = 0; j < classes; j++)
                if(list[i].className.search('\\b' + classArray[j] + '\\b') != -1) {
                    result.push(list[i])
                    break;
                }
        return result
    }
}

var some = document.getElementsByClassName('some');
for(var i=0; i < some.length; ++i)
    some[i].readOnly=true;
ava
Nett | 19.03.2013, 23:06 (Edited 20.03.2013 00:07) #
Быстрое решение на jQuery:


$('input.some').attr('readonly', true);


или просто по классу


$('.some').attr('readonly', true);


И не нужно ни каких циклов и прочей головной боли.

ava
marozz | 20.03.2013, 13:00 #
спасибо, но поля на которых установлен class='some' не блокируются
ava
Nett | 21.03.2013, 00:59 #
Не может быть чтоб не работало.

Вот после полной загрузки страницы все input с нужным Вам классом будут блокированы:


$(function(){
    $('input.some').attr('readonly', true);
});

И не надо ни каких циклов.
Либо не подключена библиотека jQuery.
ava
baldina | 20.03.2013, 13:20 #
у меня блокируются: http://jsfiddle.net/VqSy3/
что я делаю не так?
ava
Aliance | 20.03.2013, 16:37 #
baldina, разве что еще стоило учесть это:
Цитата (marozz @  19.3.2013,  20:25 findReferencedText)
(это будут input )

ava
baldina | 20.03.2013, 17:24 #
мож я чего не понял, но в моём примере
Цитата (baldina @  20.3.2013,  13:20 findReferencedText)
 http://jsfiddle.net/VqSy3/

именно input
ava
marozz | 20.03.2013, 19:04 #

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<head><title>тест</title>
<script type="text/javascript">
if(document.getElementsByClassName === undefined) {
    document.getElementsByClassName = function(classList) {           
        var i,j,
        list = document.getElementsByTagName('*'),
        length = list.length,
        classArray = classList.split(/\s+/),
        classes = classArray.length,
        result = [], i,j
        for(i = 0; i < length; i++)
            for(j = 0; j < classes; j++)
                if(list[i].className.search('\\b' + classArray[j] + '\\b') != -1) {
                    result.push(list[i])
                    break;
                }
        return result
    }
}

var some = document.getElementsByClassName('some');
for(var i=0; i < some.length; ++i)
    some[i].readOnly=true;

</script>
</head>
<body>
<input type='text' class='some'/>
</body>
</html>

Не работает, что я делаю не так?
ava
baldina | 20.03.2013, 19:23 #
Цитата (marozz @  20.3.2013,  19:04 findReferencedText)
Не работает, что я делаю не так?

пытаетесь обработать элементы, которых еще нет в html на момент запуска скрипта.
javascript отрабатывает немедленно, так что надо выполнять свой код после загрузки всей страницы или хотя бы поместить скрипт после тегов, которые он обрабатывает


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<head><title>тест</title>
<script type="text/javascript">
if(document.getElementsByClassName === undefined) {
    document.getElementsByClassName = function(classList) {           
        var i,j,
        list = document.getElementsByTagName('*'),
        length = list.length,
        classArray = classList.split(/\s+/),
        classes = classArray.length,
        result = [], i,j
        for(i = 0; i < length; i++)
            for(j = 0; j < classes; j++)
                if(list[i].className.search('\\b' + classArray[j] + '\\b') != -1) {
                    result.push(list[i])
                    break;
                }
        return result
    }
}
</script>
</head>
<body>
<input type='text' class='some'/>
<script type="text/javascript">
var some = document.getElementsByClassName('some');
for(var i=0; i < some.length; ++i)
    some[i].readOnly=true;
</script>
</body>
</html>
ava
marozz | 20.03.2013, 20:03 #
baldina, точно, сори. А нельзя ли в саму функцию дописать инициализацию скрипта после полной загрузки страницы,  чтоб не прописывать javascript код в тело страницы, а вынести его в отдельный файл. Может бред конечно несу smile 
ava
baldina | 20.03.2013, 21:08 #
Цитата (marozz @  20.3.2013,  20:03 findReferencedText)
нельзя и в саму функцию дописать инициализацию скрипта после полной загрузки страницы, 


window.onload = function (){
  var some = document.getElementsByClassName('some');
  for(var i=0; i < some.length; ++i)
    some[i].readOnly=true;
}

еще лучше какой-нить библиотекой воспользоваться, напр. jquery

Цитата (marozz @  20.3.2013,  20:03 findReferencedText)
возможно ли модифицировать скрипт таким образом чтоб к примеру если есть конструкция

можно. только придется поработать с DOM. что бы сделать это проще, опять же jquery и т.п. поможет
ava
marozz | 20.03.2013, 21:18 #
baldina, jquery уже впринципе на странице для других скриптов используется. Вот как это написать ? не поможете студенту ?smile буду очень благодарен smile
ava
baldina | 20.03.2013, 22:13 #
Цитата (marozz @  20.3.2013,  21:18 findReferencedText)
jquery уже впринципе на странице для других скриптов используется. Вот как это написать ?

ищите функцию ready и вписывайте туда то что нужно.

jQuery().ready(function (){
....
  var some = document.getElementsByClassName('some');
  for(var i=0; i < some.length; ++i)
    some[i].readOnly=true;
....
})


насчет второго курите селекторы
ava
Aliance | 21.03.2013, 10:21 #
Цитата (baldina @  20.3.2013,  18:24 findReferencedText)
мож я чего не понял, но в моём примере именно input 

я по ссылке не переходил, а смотрел пример кода, который непосредственно здесь был во втором посте. там был нативный js аналог такой конструкции:
$('.some')

а я лишь уточнил, что автору нужно более конкретно:
$('input.some')


хотя это все мелочи, и собственно jQuery легко в этом поможет.
ava
baldina | 21.03.2013, 11:32 #
нативный код реализовал getElementsByClassName, тут теги непричем
а в посте ТС было
Цитата (marozz @  19.3.2013,  19:25 findReferencedText)
найти все элементы с классом "some" (это будут input ) 

т.е. найти все, а что они все input типа и так получится. а если надо, с выбиранием input ТС и сам справится)))
тем боле теперь, с jquery  smile 
ava
marozz | 21.03.2013, 11:54 #
baldina, спасибо, тут вроде вроде ясно, а как можно сделать подобное ?

Цитата


и еще такой момент, возможно ли модифицировать скрипт таким образом чтоб к примеру если есть конструкцияРазметка HTML



<div class='slaas'>
  <p>Текст</p><input  type='checkbox' ><input type='text'>

</div>



Если на втором input (type='text')установлен класс some, он не просто блокируется, но и при этом для checkbox возле него присваивается свойство display:none , при этом обойтись без присвоения id для checkbox

ava
Nett | 21.03.2013, 23:08 #
Конечно можно. Для данного случая:

jQuery


$('input[type="text"].some').prev().css({'display':'none'});


Всё.
Please register or login to write.
Firm of day
Вы также можете добавить свою фирму в каталог IT-фирм, и публиковать статьи, новости, вакансии и другую информацию от имени фирмы.
Подробнее
Contributors
ava  Aliance   baldina   Nett   marozz
advanced
Submit