Question

我正面临一个问题，我想要你的帮助。我创建了两个单独的表格。第一个有两个输入文本，第二个有一些复选框。我希望在加载页面上第二个被禁用，当一个复选框是检查然后表格将被启用，第一个将被禁用。如果没有选中复选框，那么第一个启用，第二个禁用。我希望你理解。我的英语并不完美..

这是我使用的jQuery：

     //eksargirwsh is the 2nd form (with checkboxes)
     //prosthiki is the 1nd form (with two input text)


 $(document).ready(function() {
     $('#eksargirwsh :not([type=checkbox])').prop('disabled', true);

 });

     $(":checkbox").change(function(){
      if (this.checked) {
        $('#eksargirwsh :not([type=checkbox])').prop('disabled', false);
        $('#prosthiki').prop('disabled', true);
                                                }
      else{
        $('#eksargirwsh :not([type=checkbox])').prop('disabled',true);
        $('#prosthiki').prop('disabled', false);
   }
 }) ;

错误

在加载页面上，第二个未按预期禁用
如果我在行中检查了两个或更多的检查符并以相反的方式取消选中它们，那么第二个表单将被禁用，事实上我不想

这是我找到的解决方案：

$(document).ready(function() {
     $('#eksargirwsh :not([type=checkbox])').removeAttr('disabled');

                        });

           $(":checkbox").change(function(){
               //if (this.checked){
             if ($('form input[type=checkbox]:checked').size()>=1){
                 $('#eksargirwsh :not([type=checkbox])').removeAttr('disabled');
                                        $('#prosthiki').prop('disabled', true);
                                                }
                   else{
                  $('#eksargirwsh :not([type=checkbox])').prop('disabled',true);
                                    $('#prosthiki').removeAttr('disabled');
        }

    });

我把它放在输入上：

disabled="disabled"

Answer 1

首先，请记住在$(document).ready函数

中初始化事件处理程序

其次，为了提高性能，请记住缓存选择器。

然后，为了使其更清晰，请将禁用/启用逻辑移到单独的功能：

$(document).ready(function() {
    var $eksargirwsh = $('#eksargirwsh');
    var $prosthiki = $('#prosthiki');

    var $eksargirwshElements = $eksargirwsh.find('input:not([type=checkbox]), select, textarea, button');
    var $prosthikiElements = $prosthiki.find('input, select, textarea, button');

    $eksargirwsh.on('change', 'input[type=checkbox]', onCheckboxChange);

    disableElements($eksargirwshElements, true);

    function onCheckboxChange(){
        if( $eksargirwsh.find('input:checked').size() == 0 ){ // no checked inputs
            disableElements($eksargirwshElements, true); // disable #2
            disableElements($prosthikiElements, false); // enable #1
        } else {
            disableElements($eksargirwshElements, false); // enable #2
            disableElements($prosthikiElements, true); // disable #1
        }
    }

    function disableElements($elements, state){
        $elements.attr('disabled', state);
    }
});

如果您对可读性不太关心onCheckboxChange可以缩短为

function onCheckboxChange(){
    var zeroChecked = $eksargirwsh.find('input:checked').size() == 0;
    disableElements($eksargirwshElements, zeroChecked);
    disableElements($prosthikiElements, !zeroChecked);
}

Answer 2

.prop('disabled',false)不是删除已禁用属性的正确方法。请改用.removeAttr('disabled')。

启用表单并同时禁用另一个表单

2 个答案: