Встала совершенно банальная задача передо мною: Есть меню поиска, в котором несколько входных параметров: по номеру, по фамилии, по дате, например. Нужно делать пост только того параметра, который выбран. Если проще – несколько INPUT, которые выключены по умолчанию (атрибутом DISABLED), пользователь кликает на INPUT, и он становится включенным. Одновременно может быть включен только один INPUT.
Как-то даже не пришло в голову, что с этим может возникнуть проблема. Оказалось, что выключенный INPUT вообще не реагирует ни на какие события, а также не передаёт событие выше – своему родителю (попробовал ловить событие у родительского DIV).
Внешний вид необходимой формы
В таком случае увидел единственное решение в создании прозрачного DIV, который будет лежать поверх INPUT и ловить клик на нём.
Тут приведу HTML-код и сопутствующий css:
<style type='text/css'>
body {background-color: #008080; color: white;}
.input_container {
background-color: #6AACBD;
border: 1px solid #005353;
float: left;
width: 170px;
padding: 3px 5px;
margin: 0px 2px;
position: relative;
}
.invisible_div {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: transparent;
}
.selected .invisible_div {
display: none;
}
</style>
<div class='input_container'>
<label>
<input type='radio' name='search_var' value='search_id'>
По номеру
</label>
<br>
<input type='text' name='search_id' value='1002' disabled>
<div class='invisible_div'></div>
</div>
<div class='input_container'>
<label>
<input type='radio' name='search_var' value='search_name'>
По имени
</label>
<br>
<input type='text' name='search_name' value='Daniel' disabled>
<div class='invisible_div'></div>
</div>
<div class='input_container' id='div3'>
<label>
<input type='radio' name='search_var' value='search_date'>
По дате
</label>
<br>
<input type='text' name='search_date' value='09.08.2010' disabled>
<div class='invisible_div'></div>
</div>
Далее код на javascript:
var go_through_list_of_childs = function(element, set_radio){
for(var i=0; i < element.childNodes.length; i++){
var child = element.childNodes[i];
if(typeof(child.type) != 'undefined' && child.type == 'radio'){
child.checked = set_radio;
}
if(typeof(child.type) != 'undefined' && child.type == 'text'){
child.disabled = !set_radio;
if('v' != '\v')
child.focus();
}
if(element.childNodes[i].childNodes.length > 0){
go_through_list_of_childs(element.childNodes[i], set_radio);
}
}
}
var click_on_input_group = function(){
var alldivs = document.getElementsByTagName('div');
for(var i = 0; i < alldivs.length; i++){
if(alldivs[i].className.match(/input_container/gi)){
go_through_list_of_childs(alldivs[i], false);
var classes = alldivs[i].className.split(' ');
var new_classes = '';
for(var j=0; j< classes.length;j++){
if(classes[j] != 'selected')
new_classes += ' ' + classes[j];
}
alldivs[i].className = new_classes;
}
}
var parent = this.parentNode;
go_through_list_of_childs(parent, true);
parent.className += ' selected ';
}
window.onload = function(){
var alldivs = document.getElementsByTagName('div');
for(var i = 0; i < alldivs.length; i++){
if(alldivs[i].className == 'invisible_div'){
alldivs[i].onclick = click_on_input_group;
}
}
}
А ещё далее элегантно заменю javascript на jQuery:
$(document).ready(function(){
$('.invisible_div').click(function(){
$('.input_container input:text').attr('disabled', true);
var parent = $(this).parents('.input_container');
parent.find('input:radio').attr('checked', true);
parent.find('input:text').attr('disabled', false).focus();
});
});
Код весьма прост, поэтому детальные объяснения дам, только если некто попросит в комментариях.
