Нестандартный вид чекбокса на JS - конфликт или ошибка при подстановке в реальный чекбокс

Тема в разделе "JavaScript", создана пользователем jabbaxatt, 31 окт 2014.

Модераторы: ZiX
  1. jabbaxatt

    jabbaxatt Добрый модератор

    Moderator
    Регистр.:
    21 янв 2009
    Сообщения:
    896
    Симпатии:
    422
    Чекбоксы нестандартного вида рисуются на JS, в label. При нажатии на них - должен ставится Cheked в реальном чекбоксе типа input. Но он то ставит галку то не ставит. Специально пока рабочие чекбоксы сделал видимыми - чтоб удобнее смотреть.

    Сайт поциент - http://resort-yug.ru/

    скрипт поциент:
    Код:
    //Chek box
    jQuery(document).ready(function(){
    
    jQuery(".checkbox-lbl").mousedown(
    /* при клике на чекбоксе меняем его вид и значение */
    function() {
    
         changeCheck(jQuery(this));
        
    });
    
    
    jQuery(".checkbox-lbl").each(
    /* при загрузке страницы нужно проверить какое значение имеет чекбокс и в соответствии с ним выставить вид */
    function() {
        
         changeCheckStart(jQuery(this));
        
    });
    
                                            });
    
    function changeCheck(el)
    /*
        функция смены вида и значения чекбокса
        el - span контейнер дял обычного чекбокса
        input - чекбокс
    */
    {
         var el = el,
              input = el.find("input").eq(0);
            if(!input.attr("checked")) {
            el.css("background-position","0 -22px");   
            input.attr("checked", true);
        } else {
            el.css("background-position","0 0");   
            input.attr("checked", false);
        }
         return true;
    }
    
    function changeCheckStart(el)
    /*
        если установлен атрибут checked, меняем вид чекбокса
    */
    {
    var el = el,
            input = el.find("input").eq(0);
          if(input.attr("checked")) {
            el.css("background-position","0 -22px");   
            }
         return true;
    }
    
    
    jQuery(document).ready(function(){
        var params = {
                changedEl: ".field-check select",
                visRows: 5,
                scrollArrows: true
            };
            cuSel(params);
        });
     
  2. Aglok

    Aglok ∞³

    Регистр.:
    9 янв 2012
    Сообщения:
    162
    Симпатии:
    46
    Суть в том что у тебя label содержит input, когда ты нажимаешь на label срабатывает неявное значение объекта input : value = 1. А потом ты еще вешаешь атрибут checked = true, скрипт думает что ты хочешь поменять на противоположное значение и меняет тут же на value = 0. Надо присвоить проверку input.val()
     
    jabbaxatt нравится это.
  3. jabbaxatt

    jabbaxatt Добрый модератор

    Moderator
    Регистр.:
    21 янв 2009
    Сообщения:
    896
    Симпатии:
    422
    Теперь у меня оранжевые не убираются. В ощем - утро вечера мудренее. Завтра буду смотреть.
    Последняя попытка выглядит так.
    Код:
    //Chek box
    jQuery(document).ready(function(){
    
    jQuery(".checkbox-lbl").mousedown(
    /* при клике на чекбоксе меняем его вид и значение */
    function() {
    
         changeCheck(jQuery(this));
        
    });
    
    
    jQuery(".checkbox-lbl").each(
    /* при загрузке страницы нужно проверить какое значение имеет чекбокс и в соответствии с ним выставить вид */
    function() {
        
         changeCheckStart(jQuery(this));
        
    });
    
                                            });
    
    function changeCheck(el)
    /*
        функция смены вида и значения чекбокса
        el - span контейнер дял обычного чекбокса
        input - чекбокс
    */
    {
         var el = el,
              input = el.find("input").eq(0);
            if(!input.attr("checked")) {
            el.css("background-position","0 -22px");
               if(!input.val(1, true))
            {
           
                input.attr("checked", true);                   
            }
            else
            {
            }       
    
        } else {   
            el.css("background-position","0 0");       
               if(!input.val(1, true))
            {   
           
            }
            else
            {
                input.attr("checked", false);
            }           
           
        }
         return true;
    }
    
    function changeCheckStart(el)
    /*
        если установлен атрибут checked, меняем вид чекбокса
    */
    {
    var el = el,
            input = el.find("input").eq(0);
          if(input.attr("checked")) {
            el.css("background-position","0 -22px");   
            }
         return true;
    }
     
  4. Бод

    Бод Писатель

    Регистр.:
    24 авг 2014
    Сообщения:
    7
    Симпатии:
    0
    зачем тебе вообще реальные чекбоксы? юзай JQuery плагин типа chosen.jquery.js
     
  5. jabbaxatt

    jabbaxatt Добрый модератор

    Moderator
    Регистр.:
    21 янв 2009
    Сообщения:
    896
    Симпатии:
    422
    Потому что модуль поиска использует именно их.
     
  6. Aglok

    Aglok ∞³

    Регистр.:
    9 янв 2012
    Сообщения:
    162
    Симпатии:
    46
    Убери вообще атрибут checked и напиши вот такое условие!
    Код:
    function changeCheck(el){
    /*
        функция смены вида и значения чекбокса
        el - span контейнер дял обычного чекбокса
        input - чекбокс
    */
      
         var el = el,
            input = el.find("input").eq(0);
               if(input.val() != 1){
                el.css("background-position","0 0px");
                input.val(1, true);
            }                  
            else{
                el.css("background-position","0 -22px");
                input.val(0, true);
            }                      
            return true;
    }