如果用户从下拉列表中选择“ other”，则无法使用jquery clone禁用false

Question

使用我当前的代码在jquery克隆上进行一切工作都很好。

1. 第一种情况，如果用户从下拉列表中选择其他 ，则启用文本字段

2. 第二种情况是，当用户选择其他“原始”和“克隆”文本字段时，如果用户单击“ addmore”按钮div，则id会完美地克隆，实际上应该仅是克隆克隆才应启用而不是启用

这是当前的jQuery代码

        var i=1;
    $(document).on("click", ".edu_add_button", function () { 
        var i=$('.cloned-row1').length;
        $(".cloned-row1:last").clone(true).insertAfter(".cloned-row1:last").attr({           
            'id': function(_, id) { return id + i },
            'name': function(_, name) { return name + i }
            }).end().find('[id]').val('').attr({ 'id': function(_, id) { return id + i }  
        }); 
        $(".cloned-row1:last").find(".school_Name").attr('disabled', true).val('');
            if(i < $('.cloned-row1').length){
                $(this).closest(".edu_add_button").removeClass('btn_more edu_add_button').addClass('btn_less btn_less1');
            }   
        i++;
        return false; 
    });  

$(document).on('click', ".btn_less1", function (){
    var len = $('.cloned-row1').length;
    if(len>1){
        $(this).closest(".cloned-row1").remove();
    }
});

$(document).on('change', '.txt_schName', function (){
    var cur = $('.txt_schName').index($(this));
    $('.school_Name').eq(cur).val($(this).val())
    if ($(this).val() == "other") {
        $(".school_Name").prop('disabled', false);
         $(".school_Name").val('');
    }else{
        $(".school_Name").prop('disabled', true);

    }
});

 $(document).on('change', '.txt_degreName', function (){
    var cur = $('.txt_degreName').index($(this));
    $('.degree_Description').eq(cur).val($(this).val())
     if ($(this).val() == "other") {
        $("#degree_Description").prop('disabled', false);
         $("#degree_Description").val('');
    }else{
        $("#degree_Description").prop('disabled', true);
    }
}); 

这是小提琴链接

请建议我

感谢和问候马哈德万

Answer 1

演示

出现问题是因为您直接使用类选择器。 您只需要将值应用于属于同一容器的文本框即可。 使用closest()查找父级。

$(document).on('change', '.txt_schName', function (){
    var cur = $('.txt_schName').index($(this));
    var container = $(this).closest('.container-fluid');
    $('.school_Name').eq(cur).val($(this).val())
    if ($(this).val() == "other") {
        $(".school_Name", container).prop('disabled', false);
         $(".school_Name", container).val('');
    }else{
        $(".school_Name", container).prop('disabled', true);
    }
});

Answer 2

此处演示

您需要引用必须禁用和启用的适当元素。

select的父级的同级，并找到要disabled的input element ，如下所示：

$(document).on('change', '.txt_schName', function (){
        var cur = $('.txt_schName').index($(this));
        $(this).closest('.col-xs-6').next('.col-xs-6').find('.school_Name').eq(cur).val($(this).val())
        if ($(this).val() == "other") {
             $(this).closest('.col-xs-6').next('.col-xs-6').find(".school_Name").prop('disabled', false);
             $(this).closest('.col-xs-6').next('.col-xs-6').find(".school_Name").val('');
        }else{
            $(this).closest('.col-xs-6').next('.col-xs-6').find(".school_Name").prop('disabled', true);

        }
    });

Answer 3

从您所做的事情开始，您实际上使用.school_Name类更改了每个字段，以实现.school_Name ，您可以添加$(this).parents(".row").find(".class_name")以便仅更改当前div 。

$(document).on('change', '.txt_schName', function (){
    var cur = $('.txt_schName').index($(this));
    $('.school_Name').eq(cur).val($(this).val())
    if ($(this).val() == "other") {
        $(this).parents(".row").find(".school_Name").prop('disabled', false);
        $(this).parents(".row").find(".school_Name").val('');
    }else{
        $(this).parents(".row").find(".school_Name").prop('disabled', true);

    }
});

此处演示

Answer 4

您可以通过使用parent（）和next（）选择器定位特定项目来实现此目的，而且我更喜欢访问特定字段而不是索引（例如eq）作为输入。

  var schoolObj = $(this).parent().next().find(".school_Name"); 
  schoolObj.val($(this).val());
    if ($(this).val() == "other") {             
       schoolObj.prop('disabled', false);
       schoolObj.val('');
    } else {
       schoolObj.prop('disabled', true);
    }

这是Fiddle

您可以看一下jQuery遍历：

父母： https ： //api.jquery.com/parent/

下一个： https ： //api.jquery.com/next/

查找： https : //api.jquery.com/find/

并进行完整遍历： https ： //api.jquery.com/category/traversing/