Question

我有一个页面，其中包含两个具有不同ID的复选框以及另一个div中的文本框和另一个div中包含4个单选按钮的单选按钮。我想要实现的目标是：

如果用户选中第一个复选框，则应执行以下操作

要禁用的复选框二
文本框的值为0并且只读
选择第一台收音机并将其与标签一起隐藏

如果用户取消选中第一个复选框，则应该尊重上述步骤。

如果用户选中第二个复选框，则应执行以下操作

要禁用的复选框
文本框的值为1 abd，只读
选择第一台收音机并将其与标签一起隐藏

如果用户取消选中第二个复选框，则应该尊重上述步骤。

我已经提出以下代码

$("#firstCheckBox").on("change", function () {
    if ($(this).is(":checked")) {
        $('#secondCheckBox').prop('disabled', true);
        $('#spinner').val('0');
        $('#spinner').prop('readonly', true);
        $('#radio_id:first').prop('checked', true);
        $('#radio_id:not(:checked)').hide();

    } else {
        $('#secondCheckBox').prop('disabled', false);
        $('#spinner').val('');
        $('#spinner').prop('readonly', false);
        $('#radio_id:first').prop('checked', false);
        $('#radio_id:not(:checked)').show();
    }
});
$("#secondCheckBox").on("change", function () {
    if ($(this).is(":checked")) {
        $('#firstCheckBox').prop('disabled', true);
        $('#spinner').val('1');
        $('#spinner').prop('readonly', true);
        $('#radio_id:first').prop('checked', true);
        $('#radio_id:not(:checked)').hide();

    } else {
        $('#firstCheckBox').prop('disabled', false);
        $('#spinner').val('');
        $('#spinner').prop('readonly', false);
        $('#radio_id:first').prop('checked', false);
        $('#radio_id:not(:checked)').show();
    }
});

所以我的问题是，有更好的方法可以做到这一点，还是我走在正确的轨道上？

Answer 1

类似的东西：

var $targetCheckBoxes = $("#firstCheckBox,#secondCheckBox");
$targetCheckBoxes.change(function () {
  var isChecked = this.checked;
  var currentElement = this;
  $targetCheckBoxes.filter(function(){
    return  this.id  != currentElement.id;
  }).prop('disabled', isChecked );
  $('#spinner').val( isChecked  ? this.value : '');
  $('#spinner').prop('readonly', isChecked);
  $('#radio_id').toggle(isChecked).prop('checked', isChecked );
});

<强> Working Demo

通过复选框更改事件更改输入值

1 个答案: