JQuery снять флажок проблема флажка - PullRequest
Новая
       16

JQuery снять флажок проблема флажка

5 голосов
/ 13 августа 2011

У меня есть флажок и поле ввода со значением по умолчанию, дающим информацию о том, во что писать. если флажок установлен, курсор должен быть в фокусе в поле ввода, и он должен быть пустым. если я сниму флажок, значение по умолчанию должно быть снова видно.

это мой код флажка: 

<input name="city" type="checkbox" id="checkcity"/> 
<input type="text" name="city" id="city" value="###VALUE_CITY###" />

и у меня есть следующий jquery: 

 var $city = $("input#city");
 var cityValue = "Your city...";

 !$city.val() && $city.val(cityValue);


  $('#checkcity').click(function(){
    if ($(this).is(':checked')) {
        $city.focus();
    } else {
        $city.val(cityValue);
        $(this).attr({checked: false}); 
    }
 });

// редактировать начало у меня есть еще немного кода, может быть, ошибка в этой части (сначала я подумал, что это не актуально, но, возможно, это так, извините)

это должно делать следующее (что также хорошо работает), когда я щелкаю непосредственно в поле ввода, флажок установлен, когда я оставляю его без содержимого, флажок не установлен, текстовое значение по умолчанию «ваш город ...» находится внутри поля ввода, когда я ввожу какой-то другой текст, флажок будет остановлен. когда я снимаю флажок, значение по умолчанию находится внутри поля ввода. единственная проблема в том, что когда поле ввода пусто и я снял флажок ... он не будет работать 

  !$city.val() && $city.val(cityValue);
  $city.focus(function() { $city.val() == cityValue && $city.val("");$('#checkcity').attr({checked: true});});
  $city.blur(function() { 
        if ($city.val().length > 0 && $city.val() != cityValue){ 
            $('#checkcity').attr('checked', true);
            }                                                  
        if ($city.val() == "") {
            $('#checkcity').removeAttr('checked');
            $city.val(cityValue);
            }
        });

  $city.val() && $('#checkcity').attr('checked', true);
  $city.val() == cityValue && $('#checkcity').removeAttr('checked');

// редактировать конец

Он работает нормально, чтобы установить флажок и установить курсор в поле ввода # city, но если я сниму флажок, он будет работать только так, как должен, пока я нажимаю левую кнопку мыши (флажок снят и значение по умолчанию в поле ввода ), но после того, как кнопка поднимается, флажок снова устанавливается и поле ввода остается пустым. Когда я снимаю флажок и перемещаю курсор во время нажатия левой кнопки мыши из области флажков, он также работает нормально.

Ответы [ 4 ]

19 голосов
/ 13 августа 2011

Если вы используете jquery 1.6.0 или выше, замените 

$(this).attr({checked: false});

с 

$(this).prop("checked", false);

иначе, если вы используете более старую версию jquery, используйте 

$(this).removeAttr("checked");
1 голос
/ 13 августа 2011

хорошо, я решил, проблема была в части размытия и removeAttr ('ckecked') 

$city.blur(function() { 
    if ($city.val().length > 0 && $city.val() != cityValue){ 
        $('#checkcity').attr('checked', true);
        }                                                  
    if ($city.val() == "") {
        // caused the error:
        // $('#checkcity').removeAttr('checked');
        // changed to this:
    setTimeout(function(){
           $('#checkcity').attr('checked', false);
        }, 100);
        $city.val(cityValue);
        }
    });

Я до сих пор не совсем понимаю, откуда возникла проблема, а функция времени ожиданиялучший способ, но я не могу найти другой в данный момент ...

1 голос
/ 13 августа 2011

РЕДАКТИРОВАТЬ: Пожалуйста, попробуйте это как есть, если вы получите какие-либо ошибки консоли, дайте мне знать. 

$(document).ready(function () {
    // Store textbox and string in variables
    var $city = $("input#city");
    var cityValue = "Your city...";

    // set the value on load
    $city.val(cityValue);

    // The click event for the checkbox
    $('#checkcity').click(function () {
        // If it is checked in this click then clear the textbox and focus
        if ($(this).attr("checked") == "checked") {
            $city.val("");
            $city.focus();
        }
        // If it is unchecked on this click then set the default string as value and blur
        else {
            $city.val(cityValue);
            $city.blur();
        }
    });
});

Конец РЕДАКТИРОВАНИЯ $ (это).attr ({флажок: ложно});

Не требуется.Функция щелчка не отменяет функциональность по умолчанию для флажка.

1 голос
/ 13 августа 2011

Вам не нужно устанавливать проверенное свойство

Взгляните на это http://jsfiddle.net/fxzD7/1/

...