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

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

错误

1. 在加载页面上，第二个没有按预期禁用
2. 如果我在一行中选中了两个或更多的 checkbx，并以相反的方式取消选中它们，那么第二个表单将变为禁用事实，我不想要

这是我找到的解决方案：

$(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

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

Answer 2

首先，记得在$(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);
}