Question

我的树列与此类似。

<div class="col-md-4 column">
    <div class="form-group">
       <input type="hidden" name="identityCardList[0].identityCardId">
       <label for="identityCardType1" class="col-sm-3 control-label">Type</label>
       <div class="col-sm-9">
           <select id="identityCardType1" name="identityCardList[0].identityCardType" class="form-control">
           </select>
       </div>
   </div>

   <div class="form-group">
       <label for="idCardValue1" class="col-sm-3 control-label">Valeur</label>
       <div class="col-sm-9">
           <input type="text" class="form-control" id="idCardValue1" name="identityCardList[0].value" placeholder="Entrer la valeur">
       </div>
   </div>

   <div class="form-group">
       <label for="expirationDateCard1" class="col-sm-3 control-label">Expiration</label>

       <div class="col-sm-9">
           <div class="input-group date" id="expirationDateCardPicker1">
               <input type="text" id="expirationDateCard1" name="identityCardList[0].expiration" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
           </div>
       </div>
   </div>

   <div class="form-group">
       <div class="col-sm-offset-3 col-sm-9">
           <div class="checkbox">
               <label><input type="checkbox" name="identityCardList[0].lodgerOwn" value="">Garde sur eux</label>
           </div>
       </div>
   </div>
</div>

<div class="col-md-4 column">
...
</div>

<div class="col-md-4 column">
...
</div>

我在变更上放了一个事件

with：

select.parent().parent().parent()

我在<div class="col-md-4 column">级别

所以我尝试使用closest和find但没有成功

$("select[id^='identityCardType']").on('change', function (e){
    var select = $(e.target);
    var selectedOption = select.find("option:selected");

    if(selectedOption.data("card-expiration")==true){
        //disabled nearest input expidrationDateCard            
        //var inputExpiration = select.parent().parent().parent().closest(input[id^='expirationDateCard']);
        var inputExpirationselect.parent().parent().parent().closest($("input[id^='expirationDateCard']"));
    }   
});

我从来没有得到预期的价值。

Answer 1

您可以像这样重写代码，

$("select[id^='identityCardType']").on('change', function(e) {
    var selectedOption = $(this).find("option:selected");
    if (selectedOption.data("card-expiration") == true) {
        var inputValue = $(this).closest(".form-group").find("input[id^='expirationDateCard']").val();
    }
});

Answer 2

试试这个：您可以使用closest()获取父col-md-4 column div，然后找到expirationDateCard输入以禁用它。

$("select[id^='identityCardType']").on('change', function (e){
    var select = $(e.target);
    var selectedOption = select.find("option:selected");

   //disabled nearest input expidrationDateCard 
   $(this).closest('.col-md-4.column').find('div.input-group.date input[id^="expirationDateCard"]').attr('disabled',selectedOption.data("card-expiration")==true);

});

<强> JSFiddle Demo

Answer 3

那应该是.next()：

inputExpirationselect.parent().parent().parent().next($("input[id^='expirationDateCard']"))
//-----------------------------------------------^^^^

从id开始获取最近的组件

3 个答案: