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

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. 如果我连续选中了两个或多个 checkbxes 并以相反的方式取消选中它们，则第二个表单变为禁用的事实我不想要

这是我找到的解决方案：

$(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)不是删除禁用属性的正确方法。请改用.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);
}