通过第n个父Div禁用Child Div

Question

在问题的结尾，我已经给出了我的div结构。我已经动态地添加了这个div。所以不知怎的，我得到了动态创建div的专利ID。所以现在我要禁用或隐藏id中的输入，这是“前三一”。

我无法直接使用此ID“前三一”来隐藏输入，因为它会影响具有相同ID的其他输入。

我试过这个Jquery。

$('#the-patent-id').parents().eq(4).addclass("hidden");

但没有得到理想的结果。

那么如何通过“nth”Parent Div元素禁用Child Div？

<div id="patent-1">

        <div class="one"></div>

        <div class="two"></div>

        <div class="three"></div>

        <div class="forth">

            <div class="forth-one"></div>

            <div class="forth-two"></div>

            <div class="forth-three">

                <div class="forth-three-one">
                <input type="redio" name = "By clicing this radio" class="isCurrentClass">
                </div>

                <div class="forth-three-two">
                <input>
                </div>

                <div class="forth-three-three">
                <input type="text" name = "I want to disable this input">
                </div>


             </div>                     

        </div>

    </div>

这是实际场景，以及我编写的实际js。我在单击内部输入时禁用输入。

$(document).on('click','.isCurrentClass',function () {
    if ($(this).is(':checked')) {
        alert($(this).val());
    }

    var id = $(".isCurrentClass").closest("div").prop("class");
    alert(id);

    alert($('.isCurrentClass').parents().eq(4).attr("id"));

    var ank = $('.isCurrentClass').parents().eq(4).attr("id");

    $("#".ank).find('div:eq(3) > div:eq(2) > div:first-child input').prop('disabled', 'true');

});

Answer 1

您可以尝试eq()选择器，如下所示：

注意：ID选择器应以#开头，ID对于元素应该是唯一的，并且多个元素不应共享相同的ID。

回答1 :(按照您的要求）

$(document).on('click','.isCurrentClass', function () {
    /*if ($(this).is(':checked')) {
        alert($(this).val());
    }

    var id = $(".isCurrentClass").closest("div").prop("class");
    alert(id);

    alert($('.isCurrentClass').parents().eq(4).attr("id"));

    var ank = $('.isCurrentClass').parents().eq(4).attr("id");

    $("#".ank).find('div:eq(3) > div:eq(2) > div:first-child input').prop('disabled', 'true');*/
    
    $(this).parents().eq(3).find('div:eq(3) > div:eq(2) > div:eq(2) > input').prop('disabled', true);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

   <div id="patent-1">

        <div class="one"></div>

        <div class="two"></div>

        <div class="three"></div>

        <div class="forth">

            <div class="forth-one"></div>

            <div class="forth-two">

            </div>

            <div class="forth-three">

                <div class="forth-three-one">
                   <input type="radio" name = "By clicing this radio" class="isCurrentClass">
                </div>

                <div class="forth-three-two">
                   <!--<input>-->
                </div>

                <div class="forth-three-three">
                   <input type="text" name = "I want to disable this input">
                </div>


             </div>                     

        </div>

    </div>

回答2 :(通用解决方案）

$(document).on('click','.isCurrentClass', function () {
    $(this).parents().eq(1).find('div:eq(2) > input').prop('disabled', true);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

   <div id="patent-1">

        <div class="one"></div>

        <div class="two"></div>

        <div class="three"></div>

        <div class="forth">

            <div class="forth-one"></div>

            <div class="forth-two">
              <div class="forth-two-one">
                   <input type="radio" name = "By clicing this radio" class="isCurrentClass">
                </div>

                <div class="forth-two-two">
                   <!--<input>-->
                </div>

                <div class="forth-two-three">
                   <input type="text" name = "I want to disable this input">
                </div>
            </div>

            <div class="forth-three">

                <div class="forth-three-one">
                   <input type="radio" name = "By clicing this radio" class="isCurrentClass">
                </div>

                <div class="forth-three-two">
                   <!--<input>-->
                </div>

                <div class="forth-three-three">
                   <input type="text" name = "I want to disable this input">
                </div>


             </div>                     

        </div>

    </div>

回答3 :(重构通用解决方案，只允许对应于单选按钮的一个文本框被选中）

$(document).on('change','.isCurrentClass', function () {

    $(this).parents().eq(2).find('input').prop('disabled', false);
    
    $(this).parents().eq(1).find('div:eq(2) > input').prop('disabled', true);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

   <div id="patent-1">

        <div class="one"></div>

        <div class="two"></div>

        <div class="three"></div>

        <div class="forth">

            <div class="forth-one"></div>

            <div class="forth-two">
              <div class="forth-two-one">
                   <input type="radio" name = "By clicing this radio" class="isCurrentClass">
                </div>

                <div class="forth-two-two">
                   <!--<input>-->
                </div>

                <div class="forth-two-three">
                   <input type="text" name = "I want to disable this input">
                </div>
            </div>

            <div class="forth-three">

                <div class="forth-three-one">
                   <input type="radio" name = "By clicing this radio" class="isCurrentClass">
                </div>

                <div class="forth-three-two">
                   <!--<input>-->
                </div>

                <div class="forth-three-three">
                   <input type="text" name = "I want to disable this input">
                </div>


             </div>                     

        </div>

    </div>

Answer 2

$('#patent-1').find('#forth-three-one input').attr("disabled","disabled");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<div id="patent-1">

        <div id="one"></div>

        <div id="two"></div>

        <div id="three"></div>

        <div id="forth">

            <div id="forth-one"></div>

            <div id="forth-two"></div>

            <div id="forth-three">

                <div id="forth-three-one">
                <input name = "I want to disable this input" />
                </div>

             </div>                     

        </div>

    </div>

Answer 3

您不能使用相同的ID，而应该使用类，但除此之外，您可以使用带有选择器的索引从父级开始选择输入。

＆＃13;

＆＃13;

$('#patent-1').find('div:eq(3) > div:eq(2) > div:first input').click(function() {
 $(this).parent().siblings().eq(1).find('input').prop('disabled', 'true');
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="patent-1">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
  <div class="forth">
    <div class="forth-one"></div>
    <div class="forth-two"></div>
    <div class="forth-three">
      <div class="forth-three-one">
        <input type="radio" name="By clicing this radio">
      </div>
      <div class="forth-three-two">
        <input>
      </div>
      <div class="forth-three-three">
        <input type="text" name="I want to disable this input">
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

我认为你应该使用.siblings()

具有以下结构：

<div class="forth-three">
    <div class="forth-three-one radio-container">
        <input class="my-radio" type="radio" name="By clicking this radio">
    </div>
    <div class="forth-three-two">
        <input>
    </div>
    <div class="forth-three-three input-container">
        <input class="my-input" type="text" name = "I want to disable this input">
    </div>
</div>

你的jquery可以像......一样简单。

$(document).on('click', '.my-radio', function(){
    var $radio = $(this);
    var $input = $radio.parents('.radio-container')
        .siblings('.input-container')
        .find('.my-input');

    if ($radio.is(':checked')){
        $input.attr('disabled', 'disabled');
    }else{
        $input.removeAttr('disabled');
    }
});

有关.siblings()的参考，请参阅：https://api.jquery.com/siblings/

Answer 5

这个解决方案可以帮助我隐藏输入。

        // No I take the model id tho check that which radio button is not  checked , so I can make there input visible.

        $(document).on('click','#custom-modal-experience',function () {

        var unchkDivIds = $('.isCurrentClass:not(":checked")').map(function(){
            return $(this).parents().eq(4).attr("id");        
              }).get();
        arrayUnchkDivIds = $.makeArray(unchkDivIds);
        // console.log("unchced array: "+arrayUnchkDivIds);

        // By using each here we remove the hidden class form all unchcked div
        $.each( arrayUnchkDivIds, function( i, val ) {
            //console.log (i +" : " + val);  
            $("#"+val).find('.endDateHiddenYes').removeClass('hidden');
            });

        });

        // Get the parent id by clicking on the radio button. 

        $(document).on('click','.isCurrentClass',function () {
        if ($(this).is(':checked')) {
            //alert($(this).val());
        }              
        var parentDivId = $(this).parents().eq(4).attr("id");      
        $("#"+parentDivId).find('.endDateHiddenYes').addClass('hidden');                
        });

过程：首先，我在问题中提到了Div结构。 然后在添加按钮后，我将在div结构下面添加相同的div结构。 现在来到单选按钮。我想在点击单选按钮时隐藏输入。
所以首先我通过单击单击按钮获得Div结构的父ID。

所以在获得父div id之后，我将禁用智能输入。

但是在这个过程中我想让用户只选择一个收音机，这样就可以看到其他收音机按钮的输入。