Javascript复选框验证-禁用和启用

Question

我有一个由3个复选框组成的组，我需要为其应用一些条件/限制。

例如，如果我勾选第一个复选框{{UTEP}}，则必须禁用最后一个Valências。

我有以下代码：

var _restricoes = [[1, 2]];

$（$（'＃conteudoCategorias'）。find（'。clsF3MInput'））。on（'click'，function（e）{     调试器     //获取元素     var _id = parseInt（$（this）.attr（“ id”）。replace（“ CheckBox”，“”）））;

for (var i = 0; i < _restricoes.length; i++) {
    //get item
    var _item = _restricoes[i];
    //verifica se existe
    var _existe = $.grep(_item, (x) => x === _id)[0];
    if (_existe && CategoriasAnexosVerificaCheck($(this)) === true) {
        //get other value
        var _otherValue = $.grep(_item, (x) => x !== _id)[0];

        //bloquear elementos
        var elemsBloquear = $.grep($('#conteudoCategorias :input'), function (elem) {
            return elem.getAttribute('id') !== 'CheckBox' + _id &&
                elem.getAttribute('id') !== 'CheckBox' + _otherValue;
        });

        $(elemsBloquear).attr('disabled', true);

        //desbloquear elementos
        var elemsDesbBloquear = $.grep($('#conteudoCategorias :input'), function (elem) {
            elem.getAttribute('id') === 'CheckBox' + _id;
            elem.getAttribute('id') === 'CheckBox' + _otherValue;
        });

        $(elemsDesbBloquear).attr('disabled', false);
    }
}

}）;

当我取消选中{{UTEP}}时，我需要再次启用复选框Valências，但是我无法使用它。 数组_restricoes包含可以选中的复选框的ID。如果我检查第一个，则可以检查第二个，反之亦然。数组将具有更多条件/限制，例如：_restricoes = [[1，2]，[1，4]];

注意：复选框的ID是动态的，它们是从服务器生成的，更简单了：注册数是复选框。

Answer 1

您的代码是jQuery和javascript之间的怪异组合。这是一个jQuery解决方案，您可以根据另一个复选框的checked属性来更改enabled属性。

$('#utepId').on('change', function(){
  //when #utepId is checked disable #ValenciasId
  $('#ValenciasId').prop('disabled', $(this).prop('checked'));
  //when #utepId is checked uncheck #ValenciasId
  if($(this).prop('checked')) {
    $('#ValenciasId').prop('checked', false);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="utepId" type=checkbox /><label for="utepId">utep</label>
<input id="candbId" type=checkbox /><label for="candbId">candb</label>
<input id="ValenciasId" type=checkbox /><label for="ValenciasId">Valências</label>