2017-08-25 32 views
0

當我檢查另一行的選項時,我需要將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>

+0

你是說你只想在檢查單選按鈕的行中啓用購買按鈕? – j08691

+0

是的,對不起我的英語:P – AlonsoCT

回答

2

試試這個:

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>

+0

謝謝伊萬我明白,你先把兄弟姐妹找到所有的按鈕,並禁用他們的第二行。 – AlonsoCT

+0

作品完美!謝謝! – AlonsoCT

相關問題