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

jabbaxatt

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

Сайт поциент - Для просмотра ссылки Войди или Зарегистрируйся

скрипт поциент:
Код:
//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);
    });
 
Суть в том что у тебя label содержит input, когда ты нажимаешь на label срабатывает неявное значение объекта input : value = 1. А потом ты еще вешаешь атрибут checked = true, скрипт думает что ты хочешь поменять на противоположное значение и меняет тут же на value = 0. Надо присвоить проверку input.val()
 
Теперь у меня оранжевые не убираются. В ощем - утро вечера мудренее. Завтра буду смотреть.
Последняя попытка выглядит так.
Код:
//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;
}
 
зачем тебе вообще реальные чекбоксы? юзай JQuery плагин типа chosen.jquery.js
 
Убери вообще атрибут 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;
}
 
Назад
Сверху