Помогите разобратся с Jquery append

unsiker · 30 Июн 2011

Есть простенький скрипт на Jquery. Его работа: если нажал на один из чекбоксов на форме все остальные стают недоступными(проставлется атрибут disabled). Но проблема в следующем: при создании страницы количество чекбоксов фиксированное и их приходится добавлять. Добавляю с помощью Jquery append(). Так вот при клике на добавленные с помощью Jquery чекбоксы ничего не происходит. Как сделать так что б при клике на динамически созданный чекбокс происходил вызов нужной функции?
Код:

PHP:

<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
    $(":checkbox").click(function() {
          if (this.checked){
              $(":checkbox").attr('disabled', true);
              $(this).attr('disabled', false);
            } else{
                $(":checkbox").attr('disabled', false);
            }
    });
    $("#btn").click(function() {
        var iteration = $("#count").val();
        iteration++;
        $("#check").append('<input type="checkbox" value="'+iteration+'" name="chek['+iteration+']" id="correct"> Check'+iteration+'<br />');
    });
});
</script>
<input type="hidden" value="2" name="chek" id="count">
<div id="check">
    <input type="checkbox" value="1" name="chek[1]" id="correct"> Check1<br />
    <input type="checkbox" value="2" name="chek[2]" id="correct"> Check2<br />
</div>
<br /><br /><br />
<input type="button" id="btn" value="Add CheckBox">
</body>
</html>

Во вложении сама html страничка с проблемным кодом

polyetilen · 1 Июл 2011

Так как список чекбоксов пополнился после обхода селектора ($(":checkbox")), то надо опять обойти все чекбоксы (или только добавленный) и присвоить им click. Ещё добавлена проверка какой чекбокс добавлять и исправлена итерация.

HTML:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>test</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<body>
<script type="text/javascript">
var checked = false;
$(document).ready(function() {
    
    function checkbox(){
        //[type=checkbox] больше производительности может пригодится
        $("#check [type=checkbox]").click(function() {
              if (this.checked){
                  $("#check [type=checkbox]").attr('disabled', true);
                  $(this).attr('disabled', false);
                  checked = true;
                } else{
                    $("#check [type=checkbox]").attr('disabled', false);
                    checked = false;
                }
        });
    }
    
    checkbox();
    
    $("#btn").click(function() {
        //количество чекбоксов
        var iteration = $("#check [type=checkbox]").size();
        iteration++;
        //проверка какой чекбокс добавлять disabled или нет
        var tag = " disabled";
        if(!checked){
            tag = "";
        }
        $("#check").append('<label><input type="checkbox" value="'+iteration+'" name="chek['+iteration+']" id="correct"'+tag+'> Check'+iteration+'</label><br />');
        checkbox();
    });
});

</script>
<input type="hidden" value="2" name="chek" id="count">
<div id="check">
    <label><input type="checkbox" value="1" name="chek[1]" id="correct"> Check1</label><br />
    <label><input type="checkbox" value="2" name="chek[2]" id="correct"> Check2</label><br />
</div>
<br /><br /><br />
<input type="button" id="btn" value="Add CheckBox">
</body>

</html>

unsiker · 1 Июл 2011

есть еще один вопрос:
когда я кликаю на чекбоксу меня происходят следущие события:
1. все чекбоксы принимают атрибут .attr('disabled', true);
2. Тот чекбокс на который произошло нажатие принимает (до этого у него disabled - true, проставлен в первом пункте ) .attr('disabled', false);

Можно ли как то проставить .attr('disabled', true) всем кроме того чекбокса на который был клик?

polyetilen · 1 Июл 2011

проблема что disabled элементы не возвращают клики, тогда в обход обернуть такие элементы div тегом и уже отслеживать его клики.
Тут увидел

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

Демо

HTML:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>test</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<body>
<script type="text/javascript">

$(document).ready(function() {
    /*****Checkbox click****/
    function checkbox(){
        $("#check [type=checkbox]").unbind();
        //[type=checkbox] больше производительности может пригодится
        $("#check [type=checkbox]").click(function() {
            $("#check [type=checkbox]").attr('disabled', true);
            $("#check [type=checkbox]").attr('checked', false);
            
            $(this).attr('disabled', false);
            $(this).attr('checked', true);
            
            
            
// find the disabled elements
  $("#check [type=checkbox]").each(function (){
    // get the disabled element
    var $self = $(this)
      // get it's parent label element
      , $parent = $self.closest("label")
      // create an overlay
      , $overlay = $("<div />");

    // style the overlay
    $overlay.css({
      // position the overlay in the same real estate as the original parent element 
        position: "absolute"
      , top: $parent.position().top
      , left: $parent.position().left
      , width: $parent.outerWidth()
      , height: $parent.outerHeight()
      , zIndex: 10000
      // IE needs a color in order for the layer to respond to mouse events
      , backgroundColor: "#fff"
      // set the opacity to 0, so the element is transparent
      , opacity: 0
    })
    // attach the click behavior
    .click(function (){
      // trigger the original event handler
      return $self.trigger("click");
    });

    // add the overlay to the page  
    $parent.append($overlay);
    });
            
            
            
            
            
            
            
        });
        

  
  
  
  
  

        
    }
    
    checkbox();
    /******Add checkbox*******/
    $("#btn").click(function() {
        //количество чекбоксов
        var iteration = $("#check [type=checkbox]").size();
        iteration++;
        $("#check").append('<label><input type="checkbox" value="'+iteration+'" name="chek['+iteration+']" id="correct"> Check'+iteration+'</label><br />');
        checkbox();
    });
});

</script>
<input type="hidden" value="2" name="chek" id="count">
<div id="check">
    <label><input type="checkbox" value="1" name="chek[1]" id="correct"> Check1</label><br />
    <label><input type="checkbox" value="2" name="chek[2]" id="correct"> Check2</label><br />
    
</div>
<br /><br /><br />
<input type="button" id="btn" value="Add CheckBox">
</body>

</html>

А вообще всё это напоминает эмуляцию радио кнопки.
Демо с радио кнопками:

HTML:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>test</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<body>
<script type="text/javascript">

$(document).ready(function() {
    $("#btn").click(function() {
        var iteration = $("#check [type=radio]").size();
        iteration++;
        $("#check").append('<label><input type="radio" name="radiogroup1" value="'+iteration+'" id="RadioGroup1_'+iteration+'" />Radio</label><br />');
    });
});

</script>
<input type="hidden" value="2" name="chek" id="count">
<div id="check">
    <label><input type="radio" name="radiogroup1" value="radio" id="RadioGroup1_0" />Radio</label><br />
    <label><input type="radio" name="radiogroup1" value="radio" id="RadioGroup1_1" />Radio</label><br />
</div>
<br /><br /><br />
<input type="button" id="btn" value="Add Radio">
</body>

</html>

unsiker · 1 Июл 2011

А вообще всё это напоминает эмуляцию радио кнопки.

В этом примере да. Но проблема в том что реальная задача намного обширнее и возникают случаи когда нужно больше чем один чекбокс кликнуть, тогда то и радобатон отпадает. а спроблемой я разобрался 2 часа поиска и вуаля:

$(":checkbox").not(this).attr('disabled', true);

Помогите разобратся с Jquery append

unsiker

Постоялец

Вложения

polyetilen

Заблокирован

unsiker

Постоялец

polyetilen

Заблокирован

unsiker

Постоялец