Question

父div有类名＆＃39; panel＆＃39;。

它包含更多的子div有类名＆＃39; clonablePart＆＃39;还有一个按钮。

我们需要检查

1）如果有多个clonablePart，则默认情况下禁用的按钮应该启用

2）如果有一个可克隆部分，则按钮应保持禁用状态

注意：班级名称＆＃39; panel＆＃39;在父div面板中;也可以存在于其子女中。另外＆＃39;输入＆＃39;可以是多个

有关HTML结构的更多详细信息，请参阅小提琴。 https://jsfiddle.net/k2rbs70m/

以下是使用中的JQuery：

$('.myclass').each(function () {
        var lengthOfClones = $(this).closest('div.panel').find('.clonablePart').length;
        var typeOfClone = $(this).data("type");
        console.log('Length of Clones:' + typeOfClone + " - " + lengthOfClones); 
        lengthOfClones > 1 ? $('#delete' + typeOfClone).attr('disabled', false) : $('#delete' + typeOfClone).attr('disabled', true);
    });

如果有什么不清楚请写。

以下是一个想法的HTML：

<div id="Bank_panel" class="panel">
<div id="Bank_panel1" class="clonablePart">
    1) Bank Account
</div>
<div id="Bank_panel1" class="clonablePart">
    2) Account Name
</div>
<input type="button" value="delete" id="deleteBank"  data-type="Bank" disabled /> <i> Make it Enable onload as it have two values</i>
</div>

Answer 1

如果每个input课程只有一个panel个孩子，您可以这样定位：

$(this).find('input')

在您的代码中，这将给出：

 lengthOfClones > 1 ? $(this).find('input').attr('disabled', false) : $(this).find('input').attr('disabled', true);

https://jsfiddle.net/ggngygzy/

编辑

如果每个面板有多个输入子项，则可以找到一个唯一属性并将其作为目标。像这样举例如：

$(this).find('input[type=button]')

Answer 2

这将解决您在小提琴中提出的问题：

$('.panel').each(function () {
    // Find the button with a value of `delete`
    var button   = $(this).find("input[value='delete']");
    var clones   = $(this).find('.clonablePart');
    if(clones.length > 1) 
        button.removeAttr('disabled')
    else 
        button.attr('disabled', true) ;
});

诀窍是：你只希望孩子被计算在内，所以请使用.find()。然后，找到包装器内的按钮，并根据找到的结果数启用和禁用它。

//Will take outer panels only

$('.panel').each(function () {
    var button   = $(this).find("input[value='delete']");
    var clones   = $(this).find('.clonablePart');
    var type     = button.data("type");
    if(clones.length > 1) 
        button.removeAttr('disabled')
    else 
        button.attr('disabled', true) ;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="Bank_panel" class="panel">
    <div id="Bank_panel1" class="clonablePart">
        1) Bank Account
    </div>
    <div id="Bank_panel1" class="clonablePart">
        2) Account Name
    </div>
    <input type="button" value="delete" id="deleteBank"  data-type="Bank" disabled /> <i> Make it Enable onload as it have two values</i>
</div>
<br/>
<div id="insurance_panel" class="panel">
    <div id="insurance_panel1" class="clonablePart">
        1) Insurance Account
    </div>
    <div id="insurance_panel1" class="clonablePart">
        2) Insurance Name
    </div>
  
    <div class="panel"></div> <!--Remember outer panel can have inner panel-->
    
    <input type="button" value="delete" id="deleteInsurance" data-type="insurance" disabled /> <i> Make it Enable onload as it have two values</i>
</div>

<br/>
<div id="economy_panel" class="panel">
    <div id="economy_panel1" class="clonablePart">
        1) Economy Account
    </div>
    <input type="button" value="delete" id="deleteeconomy" data-type="economy" disabled /> <i> Keep it disable</i>
</div>

Answer 3

您的代码存在问题 $(this).data("type")始终返回Clones，这是不正确的。

因此，为data-type下的每个div提供自定义属性.panel，例如银行，提供data-type="Bank"等等。

因此HTML变为：

<div id="Bank_panel" class="panel" data-type="Bank">
    <div id="Bank_panel1" class="clonablePart">
        1) Bank Account
    </div>
    <div id="Bank_panel1" class="clonablePart">
        2) Account Name
    </div>
    <input type="button" value="delete" id="deleteBank"  data-type="Bank" disabled /> <i> Make it Enable onload as it have two values</i>
</div>
<br/>
<div id="insurance_panel" class="panel" data-type="Insurance">
    <div id="insurance_panel1" class="clonablePart">
        1) Insurance Account
    </div>
    <div id="insurance_panel1" class="clonablePart">
        2) Insurance Name
    </div>



    <input type="button" value="delete" id="deleteInsurance" data-type="insurance" disabled /> <i> Make it Enable onload as it have two values</i>
</div>

<br/>
<div id="economy_panel" class="panel" data-type="economy">
    <div id="economy_panel1" class="clonablePart">
        1) Economy Account
    </div>
    <input type="button" value="delete" id="deleteeconomy" data-type="economy" disabled /> <i> Keep it disable</i>
</div>

请在此处查看工作小提琴：“http://jsfiddle.net/k2rbs70m/7/”

Answer 4

您可以使用以下代码：

$('.panel').each(function () {
 var lengthOfClones = $(this).find('.clonablePart').length;
 var flagDisable = lengthOfClones == 1
 $(this).find("input[type='button']").prop('disabled',flagDisable);
});

它会解决您的问题。

https://jsfiddle.net/k2rbs70m/9/

如何从父div计算子div长度;使用类名;在JQuery？

4 个答案: