Question

我的表格上有两个单选按钮。如果用户选择一个无线电选项，则不再需要一些复选框选项，因此我想禁用它们。到目前为止，我工作的jQuery代码禁用了这些选项，但如果用户随后改变主意并选择其他单选按钮，则禁用的选项将保持禁用状态。

<script type="text/javascript">
    var update = function() {
        if($("#radio_1").prop("checked", true)){
            $('#checkbox_a').prop('disabled', 'disabled');
        } else {
            $('#checkbox_a').prop('disabled', false);
        }
    }
    $(update);
    $("#radio_1").change(update);
</script>

HTML：

<label for="radio_1"><input type="radio" name="radio" id="radio_1" value="radio_1" />radio_1</label> 
<label for="radio_2"><input type="radio" name="radio" id="radio_2" value="radio_2" />radio_2</label> 
<label for="checkbox_a"><input type="checkbox" name="checkbox[]" id="checkbox_a" value="checkbox_a" />checkbox_a</label>

有什么想法吗？

Answer 1

单击radio_2时，您不会触发更新。

var update = function() {
    if($("#radio_1").is(":checked")){
            $('#checkbox_a').prop('disabled', true);
        } else {
            $('#checkbox_a').prop('disabled', false);
        }
}
$(update);
$("input[id^='radio_']").change(update);

请注意$("input[id^='radio_']").change(update);在点击radio_2时触发更新。

这意味着只要点击了starts with "radio_" ID的输入，就会进行更新。

Answer 2

function onOff(obj, target) {
    if ( obj.is(':checked') ) {
        target.prop('disabled', true);
    }
    else {
        target.removeAttr('disabled');
    }
}

$('#radio_1').on('click', function(e) {
    onOff( $(this), $('#checkbox_a') );
});

Answer 3

 var update = function() {
        if($("#radio_1").is(':checked')){
            $('#checkbox_a').prop('disabled', true);
        } else {
            $('#checkbox_a').prop('disabled', false);
        }
    }

如何使用单选按钮禁用表单选项？

3 个答案: