他の行のオプションがチェックされているときに兄弟ボタンを無効にする

別の行のオプションをチェックすると、atrrボタンの値を無効にする必要があります。他の行のオプションがチェックされているときに兄弟ボタンを無効にする

私のスクリプトでは、その行のオプションをチェックするとボタンが有効になりますが、別の行の別の価格を選択すると、ボタンは有効のままです。オプションのチェック行にない兄弟ボタンを無効にする必要があります。

なぜ私の方法（兄弟）が機能しないのですか？私のコードはあり

...

var btnJB = $('.nPrice.btn-control input.btn'); 
 
$(btnJB).each(function() { 
 
    $(this).attr('disabled', true); 
 
    $(".row-table input.jbPrice").change(function() { 
 
    if (this.checked) { 
 
     $(this).closest('.row-table').find(btnJB).attr('disabled', false).siblings().attr('disabled', true); 
 
    } else { 
 
     $(btnJB).attr('disabled', true); 
 
    } 
 
    }); 
 
});

.price-jetbook-table { 
 
    display: inline-table; 
 
    width: 100%; 
 
} 
 

 
.price-jetbook-table .row-table { 
 
    display: table-row; 
 
    clear: both; 
 
    float: left; 
 
    width: 100%; 
 
    text-align: center; 
 
    background: #fff; 
 
    border: 1px solid #E2EFF9; 
 
    padding: 0px 0px; 
 
    margin: 0px; 
 
    border-top: 0px; 
 
    border-right: 0px; 
 
} 
 

 
.n-flights .col-table, 
 
.n-price .col-table { 
 
    display: table-row; 
 
    float: left; 
 
    padding: 10px 10px; 
 
    background: #fff; 
 
    border-left: 1px solid #E2EFF9; 
 
    border-right: 0px; 
 
    text-align: center; 
 
    min-height: 67px; 
 
    line-height: normal; 
 
    word-break: break-word; 
 
} 
 

 
.price-jetbook-table .row-table .nPrice { 
 
    display: inline-block; 
 
    width: 100%; 
 
    line-height: 48px; 
 
} 
 

 
.price-jetbook-table .row-table .nPrice { 
 
    display: inline-block; 
 
    width: 100%; 
 
    line-height: 48px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="price-jetbook-table"> 
 
    <div class="row-table n-price"> 
 
    <div class="col-table"> 
 
     <div class="nPrice"> 
 
     <div class="classic-form-component"> 
 
      <label> 
 
                       <input type="radio" name="jbPrice" class="jbPrice"> $22,490 <small>mxn</small> 
 
                      </label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-table"> 
 
     <div class="nPrice"> 
 
     <div class="classic-form-component"> 
 
      <label> 
 
                       <input type="radio" name="jbPrice" class="jbPrice">$41,980 <small>mxn</small> 
 
                      </label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-table"> 
 
     <div class="nPrice"> 
 
     <div class="classic-form-component"> 
 
      <label> 
 
                       <input type="radio" name="jbPrice" class="jbPrice">$58,770 <small>mxn</small> 
 
                      </label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-table"> 
 
     <div class="nPrice btn-control"> 
 
     <input type="button" class="btn btn-intern" value="buy" disabled="disabled"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row-table n-price"> 
 

 
    <div class="col-table"> 
 
     <div class="nPrice"> 
 
     <div class="classic-form-component"> 
 
      <label> 
 
                       <input type="radio" name="jbPrice" class="jbPrice"> $22,490 <small>mxn</small> 
 
                      </label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-table"> 
 
     <div class="nPrice"> 
 
     <div class="classic-form-component"> 
 
      <label> 
 
                       <input type="radio" name="jbPrice" class="jbPrice">$41,980 <small>mxn</small> 
 
                      </label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-table"> 
 
     <div class="nPrice"> 
 
     <div class="classic-form-component"> 
 
      <label> 
 
                       <input type="radio" name="jbPrice" class="jbPrice">$58,770 <small>mxn</small> 
 
                      </label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-table"> 
 
     <div class="nPrice btn-control"> 
 
     <input type="button" class="btn btn-intern" value="buy" disabled="disabled"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row-table n-price"> 
 

 
    <div class="col-table"> 
 
     <div class="nPrice"> 
 
     <div class="classic-form-component"> 
 
      <label> 
 
                       <input type="radio" name="jbPrice" class="jbPrice"> $22,490 <small>mxn</small> 
 
                      </label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-table"> 
 
     <div class="nPrice"> 
 
     <div class="classic-form-component"> 
 
      <label> 
 
                       <input type="radio" name="jbPrice" class="jbPrice">$41,980 <small>mxn</small> 
 
                      </label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-table"> 
 
     <div class="nPrice"> 
 
     <div class="classic-form-component"> 
 
      <label> 
 
                       <input type="radio" name="jbPrice" class="jbPrice">$58,770 <small>mxn</small> 
 
                      </label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-table"> 
 
     <div class="nPrice btn-control"> 
 
     <input type="button" class="btn btn-intern" value="buy"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row-table n-price"> 
 

 
    <div class="col-table"> 
 
     <div class="nPrice"> 
 
     <div class="classic-form-component"> 
 
      <label> 
 
                       <input type="radio" name="jbPrice" class="jbPrice"> $22,490 <small>mxn</small> 
 
                      </label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-table"> 
 
     <div class="nPrice"> 
 
     <div class="classic-form-component"> 
 
      <label> 
 
                       <input type="radio" name="jbPrice" class="jbPrice">$41,980 <small>mxn</small> 
 
                      </label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-table"> 
 
     <div class="nPrice"> 
 
     <div class="classic-form-component"> 
 
      <label> 
 
                       <input type="radio" name="jbPrice" class="jbPrice">$58,770 <small>mxn</small> 
 
                      </label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-table"> 
 
     <div class="nPrice btn-control"> 
 
     <input type="button" class="btn btn-intern" value="buy"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row-table n-price"> 
 

 
    <div class="col-table"> 
 
     <div class="nPrice"> 
 
     <div class="classic-form-component"> 
 
      <label> 
 
                       <input type="radio" name="jbPrice" class="jbPrice"> $22,490 <small>mxn</small> 
 
                      </label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-table"> 
 
     <div class="nPrice"> 
 
     <div class="classic-form-component"> 
 
      <label> 
 
                       <input type="radio" name="jbPrice" class="jbPrice">$41,980 <small>mxn</small> 
 
                      </label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-table"> 
 
     <div class="nPrice"> 
 
     <div class="classic-form-component"> 
 
      <label> 
 
                       <input type="radio" name="jbPrice" class="jbPrice">$58,770 <small>mxn</small> 
 
                      </label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-table"> 
 
     <div class="nPrice btn-control"> 
 
     <input type="button" class="btn btn-intern" value="buy"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

出典

2017-08-25 AlonsoCT

ラジオボタンがチェックされている行で購入ボタンのみを有効にしたいと言っていますか？ – j08691

はい、私の英語のために申し訳ありません：P – AlonsoCT

代わりにこれを試してみてください：

if (this.checked) { 
    $(this).closest('.row-table').siblings().find(btnJB).attr('disabled', true); 
    $(this).closest('.row-table').find(btnJB).attr('disabled', false); 
} else { 
    $(btnJB).attr('disabled', true); 
}

var btnJB = $('.nPrice.btn-control input.btn'); 
 
$(btnJB).each(function() { 
 
    $(this).attr('disabled', true); 
 
    $(".row-table input.jbPrice").change(function() { 
 
    if (this.checked) { 
 
     $(this).closest('.row-table').siblings().find(btnJB).attr('disabled', true); 
 
    $(this).closest('.row-table').find(btnJB).attr('disabled', false); 
 
    } else { 
 
     $(btnJB).attr('disabled', true); 
 
    } 
 
    }); 
 
});

.price-jetbook-table { 
 
    display: inline-table; 
 
    width: 100%; 
 
} 
 

 
.price-jetbook-table .row-table { 
 
    display: table-row; 
 
    clear: both; 
 
    float: left; 
 
    width: 100%; 
 
    text-align: center; 
 
    background: #fff; 
 
    border: 1px solid #E2EFF9; 
 
    padding: 0px 0px; 
 
    margin: 0px; 
 
    border-top: 0px; 
 
    border-right: 0px; 
 
} 
 

 
.n-flights .col-table, 
 
.n-price .col-table { 
 
    display: table-row; 
 
    float: left; 
 
    padding: 10px 10px; 
 
    background: #fff; 
 
    border-left: 1px solid #E2EFF9; 
 
    border-right: 0px; 
 
    text-align: center; 
 
    min-height: 67px; 
 
    line-height: normal; 
 
    word-break: break-word; 
 
} 
 

 
.price-jetbook-table .row-table .nPrice { 
 
    display: inline-block; 
 
    width: 100%; 
 
    line-height: 48px; 
 
} 
 

 
.price-jetbook-table .row-table .nPrice { 
 
    display: inline-block; 
 
    width: 100%; 
 
    line-height: 48px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="price-jetbook-table"> 
 
    <div class="row-table n-price"> 
 
    <div class="col-table"> 
 
     <div class="nPrice"> 
 
     <div class="classic-form-component"> 
 
      <label>                     
 
      <input type="radio" name="jbPrice" class="jbPrice"> $22,490 <small>mxn</small>                 
 
      </label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-table"> 
 
     <div class="nPrice"> 
 
     <div class="classic-form-component"> 
 
      <label>                     
 
      <input type="radio" name="jbPrice" class="jbPrice">$41,980 <small>mxn</small>                
 
      </label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-table"> 
 
     <div class="nPrice"> 
 
     <div class="classic-form-component"> 
 
      <label>                      
 
      <input type="radio" name="jbPrice" class="jbPrice">$58,770 <small>mxn</small>                     
 
      </label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-table"> 
 
     <div class="nPrice btn-control"> 
 
     <input type="button" class="btn btn-intern" value="buy" disabled="disabled"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row-table n-price"> 
 
    <div class="col-table"> 
 
     <div class="nPrice"> 
 
     <div class="classic-form-component"> 
 
      <label>                     
 
      <input type="radio" name="jbPrice" class="jbPrice"> $22,490 <small>mxn</small>                     
 
      </label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-table"> 
 
     <div class="nPrice"> 
 
     <div class="classic-form-component"> 
 
      <label>                     
 
      <input type="radio" name="jbPrice" class="jbPrice">$41,980 <small>mxn</small>                     
 
      </label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-table"> 
 
     <div class="nPrice"> 
 
     <div class="classic-form-component"> 
 
      <label>                     
 
      <input type="radio" name="jbPrice" class="jbPrice">$58,770 <small>mxn</small>                    
 
      </label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-table"> 
 
     <div class="nPrice btn-control"> 
 
     <input type="button" class="btn btn-intern" value="buy" disabled="disabled"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row-table n-price"> 
 
    <div class="col-table"> 
 
     <div class="nPrice"> 
 
     <div class="classic-form-component"> 
 
      <label>                     
 
      <input type="radio" name="jbPrice" class="jbPrice"> $22,490 <small>mxn</small>                     
 
      </label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-table"> 
 
     <div class="nPrice"> 
 
     <div class="classic-form-component"> 
 
      <label>                     
 
      <input type="radio" name="jbPrice" class="jbPrice">$41,980 <small>mxn</small>                     
 
      </label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-table"> 
 
     <div class="nPrice"> 
 
     <div class="classic-form-component"> 
 
      <label>                     
 
      <input type="radio" name="jbPrice" class="jbPrice">$58,770 <small>mxn</small>                   
 
      </label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-table"> 
 
     <div class="nPrice btn-control"> 
 
     <input type="button" class="btn btn-intern" value="buy"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row-table n-price"> 
 
    <div class="col-table"> 
 
     <div class="nPrice"> 
 
     <div class="classic-form-component"> 
 
      <label>                    
 
      <input type="radio" name="jbPrice" class="jbPrice"> $22,490 <small>mxn</small>                     
 
      </label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-table"> 
 
     <div class="nPrice"> 
 
     <div class="classic-form-component"> 
 
      <label>                     
 
      <input type="radio" name="jbPrice" class="jbPrice">$41,980 <small>mxn</small>                     
 
      </label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-table"> 
 
     <div class="nPrice"> 
 
     <div class="classic-form-component"> 
 
      <label>                      
 
      <input type="radio" name="jbPrice" class="jbPrice">$58,770 <small>mxn</small>                     
 
      </label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-table"> 
 
     <div class="nPrice btn-control"> 
 
     <input type="button" class="btn btn-intern" value="buy"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row-table n-price"> 
 
    <div class="col-table"> 
 
     <div class="nPrice"> 
 
     <div class="classic-form-component"> 
 
      <label>                     
 
      <input type="radio" name="jbPrice" class="jbPrice"> $22,490 <small>mxn</small>                    
 
      </label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-table"> 
 
     <div class="nPrice"> 
 
     <div class="classic-form-component"> 
 
      <label>                      
 
      <input type="radio" name="jbPrice" class="jbPrice">$41,980 <small>mxn</small>                     
 
      </label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-table"> 
 
     <div class="nPrice"> 
 
     <div class="classic-form-component"> 
 
      <label>                      
 
      <input type="radio" name="jbPrice" class="jbPrice">$58,770 <small>mxn</small>                     
 
      </label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-table"> 
 
     <div class="nPrice btn-control"> 
 
     <input type="button" class="btn btn-intern" value="buy"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

出典

2017-08-25 16:40:38

ありがとうございますIvan私は理解して、あなたは最初の兄弟をすべてのボタンを見つけて、2行目で無効にします。 – AlonsoCT

完璧に動作します！ありがとうございました！ – AlonsoCT

他の行のオプションがチェックされているときに兄弟ボタンを無効にする

答えて

関連する問題