.prop() not doing anything to target radio buttons

Question

I'm trying to uncheck a group of 2 radio buttons.

         <label>Yes 
            <input type="radio" value="true"  name="gasCustomer">
         </label>
         <label>No  
            <input type="radio" value="false"  name="gasCustomer">
         </label>

$(function () {
    $('[name="electricCustomer"]').click(function () {            
            $('[name="gasCustomer"]').prop('checked', false);
    });
});

I have tried using .prop('checked', false); but this does nothing, with no console errors thrown.

I also can't seem to change the selected option to another option by giving each option and id and doing:

             <label>Yes 
                <input type="radio" value="true"  name="gasCustomer" id="gasCYes">
             </label>
             <label>No  
                <input type="radio" value="false"  name="gasCustomer" id="gasCNo">
             </label>

   $(function () {
            $('[name="electricCustomer"]').click(function () { 
                    $("#gasCNo").prop('checked', true);
   });

What makes you think `.prop("checked", false)` isn't working? Your radio buttons start out unchecked, and it makes them unchecked, so it would be hard to see the difference. If you ensure one of them starts out checked, you'll see that it works: http://jsfiddle.net/60zdpn1b/ — T.J. Crowder, Jun 20 '18 at 10:26
Please update your question with a [mcve] demonstrating the problem, ideally a **runnable** one using Stack Snippets (the `[<>]` toolbar button; [here's how to do one](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-do-a-runnable-example-with-stack-snippets-how-do-i-do-tha)). — T.J. Crowder, Jun 20 '18 at 10:28
@T.J.Crowder ...I want to uncheck them from a function such as clicking another form input, nothing about my question is to do with their onload state. — Vereonix, Jun 20 '18 at 10:32
As an aside, why can't an electric customer also be a gas customer? But my guess is if the electric options are radio buttons too, you need to bind to their change event as you are most likely clicking their label instead of the actual input — Pete, Jun 20 '18 at 10:32

score -2 · Answer 1 · answered Jun 20 '18 at 10:35

Use a removeAttr then it works. See the updated Code Below.

<div class="col-sm-9" id="gasCustomer">
     <div class="btn-group radio-group">
         <label class="btn btn-primary not-active">Yes 
            <input type="radio" value="true"  name="gasCustomer" id="gasCYes">
         </label>
         <label class="btn btn-primary not-active">No  
            <input type="radio" value="false"  name="gasCustomer" id="gasCNo">
         </label>
     </div>
 </div>


   $(function () {
        $('[name="electricCustomer"]').click(function () {            
            if ($(this).val() == 'true') {
                $("#electricAccountNumber").removeClass('hidden');
                $("#gasCNo").prop('checked', false).removeAttr('checked');
            }
        });
})

.prop() not doing anything to target radio buttons

1 Answers1