Не могу снять флажок

Question

Я пытаюсь снять флажок после отправки моей формы

на html-стороне. У меня есть следующее

<form class="form contact-form" id="contact_form">
  <input type="checkbox" id="store_pickup" name="pickup" value="pickup" onclick="storeDetails()">
  <label for="store_pickup">Store Pickup</label>
  ....

И затем у меня есть существующий файл JS для формы, которыйработают для всех других типов ввода, кроме флажка

$(document).ready(function(){
$("#submit_btn").click(function(){

  //get input field values
    var user_name = $('input[name=name]').val();
    var user_email = $('input[name=email]').val();
    var user_message = $('textarea[name=message]').val();

    //simple validation at client's end
    //we simply change border color to red if empty field using .css()
    var proceed = true;
    if (user_name == "") {
        $('input[name=name]').css('border-color', '#e41919');
        proceed = false;
    }
    if (user_email == "") {
        $('input[name=email]').css('border-color', '#e41919');
        proceed = false;
    }

    if (user_message == "") {
        $('textarea[name=message]').css('border-color', '#e41919');
        proceed = false;
    }

    //everything looks good! proceed...
    if (proceed) {
        //data to be sent to server
        post_data = {
            'userName': user_name,
            'userEmail': user_email,
            'userMessage': user_message
        };

        //Ajax post data to server
        $.post('contact_business.php', post_data, function(response){

            //load json data from server and output message
            if (response.type == 'error') {
                output = '<div class="error">' + response.text + '</div>';
            }
            else {

                output = '<div class="success">' + response.text + '</div>';

                //reset values in all input fields
                $('#contact_form input').val('');
                $('#contact_form textarea').val('');
                // $('#store_pickup').attr('checked', false);
                // $("#store_pickup").prop('checked', false);


            }

            $("#result").hide().html(output).slideDown();
        }, 'json');

    }

    return false;
});

//reset previously set border colors and hide all message on .keyup()
$("#contact_form input, #contact_form textarea").keyup(function(){
    $("#contact_form input, #contact_form textarea").css('border-color', '');
      // $("#store_pickup").attr('checked', false);
      // $("#store_pickup").prop('checked', false);
    $("#result").slideUp();
  });
});

Я пробовал два следующих комментария, закомментированных в коде, но они не работают, может кто-нибудь помочь мне.Спасибо!

Answer 1

Вы можете переключить проверенный атрибут ввода HTML типа type = "checkbox" с помощью

$( elem ).prop('checked', false); 
$( elem ).prop('checked', true); 

Вы можете проверить текущее состояние свойства флажка с помощью

$( elem ).prop('checked')

Вы также можете использовать инструмент Chrome Inspect для просмотра / тестирования текущих свойств элемента DOM, выбрав элемент и затем просмотрев вкладку «Свойства».https://developers.google.com/web/tools/chrome-devtools/inspect-styles/edit-dom

Примечание. В моей версии Chrome мне нужно отменить выбор, а затем повторно выбрать элемент DOM, чтобы увидеть, как свойства обновляются после изменения значения свойства с помощью вышеуказанного JS.

Answer 2

Это наличие атрибута checked, который определяет, установлен ли флажок.Установка значения атрибута не имеет никакого эффекта.

Так что вам нужно

$("#store_pickup").removeAttr('checked');