在 jQuery 中检查单选按钮是否未被选中

Question

基本上，我正在尝试在未选中标为“Section”的复选框时将禁用属性设置为选择节点，如果选中，则应删除该属性。

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');
        }
    });
});

由于某些原因，这个不起作用 :(

- Turismo98

Answer 1

你的事件不会在取消选择时触发，你需要将事件应用于所有单选按钮（我们可以使用你的 name 属性）：

演示

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

- mattytommo

---

@Turismo98 没问题，很高兴能帮到你。 - Mathew Thompson

Answer 2

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

演示

编辑：如果您在页面上选择了不同的单选按钮，它也可以工作。将您的单选按钮放入一个div中并更改

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

到

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

- 0lli.rocks

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>

- David Thomas

Answer 4

试试这个：

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

- Sagar

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();
});

测试版: http://jsfiddle.net/bkdrhvk6/1/

注意: 这也确保在页面首次加载时正确启用/禁用选择。

- garryp