Check if the radio camera is disabled in jquery

Question

Basically I am trying to set a disabled attribute on a select node, if the checkbox marked as a section is not set, if it is set, it should remove the attribute.

HTML:

    <label>
        <input type="radio" name="table" value="main_categories" checked>
        Section</label>
    <label>
        <input type="radio" name="table" id="subcat" value="sub_categories">
        Catégorie</label>
    <select id="selectsec">
        <option value="1">Test</option>
    </select>

JQuery

$(document).ready(function() {
    $('#subcat').change(function(){
        if (!$('#subcat').is(":checked")) {
            $('#selectsec').attr('disabled','disabled');
        }
        else {
            $('#selectsec').removeAttr('disabled');
        }
    });
});

For some reason this does not work :(

Answer 1

Your event will not fire when deselecting, you need to apply this event to all of your radio buttons (we can use your attribute name):

Demo

$('input:radio[name=table]').change(function() {
    if (!$('#subcat').is(":checked")) {
        $('#selectsec').attr('disabled','disabled');
    }
    else {
        $('#selectsec').removeAttr('disabled');
    }
});

Answer 2

$('input').click(function() {
   if($('#subcat').is(':checked')) {
            $('#selectsec').attr('disabled','disabled'); 
   }
   else {
            $('#selectsec').removeAttr('disabled');
   }
});

Demo

EDIT: It will also work if another switch is selected on your page. Put your radio buttons in the div and change

$('input').click(function()

to

$('#idOfyouDiv').click(function()

Answer 3

, change ; change <input /> , this id , , :

$(document).ready(function() {
  // binding the change event-handler to all <input> elements
  // whose type is 'radio' and whose name is 'table':
  $('input[type=radio][name=table]').on('change', function() {
    // this will be the <input> that *is* checked, so
    // we test whether subcat is checked by checking the id
    // of this changed <input> element:
    var subcatChecked = this.id === 'subcat';

    // setting the disabled property of the <select> element
    // to true (when subcat is not checked) or false (when
    // subcat is checked):
    $('#selectsec').prop('disabled', !subcatChecked);
  });
// triggering the change event-handler on page-load/document-ready:
}).filter('#subcat').change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
  <input type="radio" name="table" value="main_categories" checked>Section
</label>
<label>
  <input type="radio" name="table" id="subcat" value="sub_categories">Catégorie
</label>
<select id="selectsec">
  <option value="1">Test</option>
</select>

Hide result

Answer 4

Try the following:

if (!$('input[name=table]:checked').val() ) 
{
alert("Not Checked");
}

Answer 5

$(document).ready(function() {
    var checkOpt = function(){
        if ($('[name$=table]:checked').val() == 'main_categories') {
            $('#selectsec').attr('disabled','disabled');
        }
        else {
            $('#selectsec').removeAttr('disabled');
        }
    };
    $('[name$=table]').change(checkOpt);
    checkOpt();
});

Fiddle: http://jsfiddle.net/bkdrhvk6/1/

Note. It also ensures that the selection is correctly enabled / disabled the first time the page loads.