选中其他行中的选项时禁用兄弟按钮

Question

当我检查另一行的选项时，我需要将 atrr 按钮值更改为禁用。

当我选中该行中的一个选项时，我的脚本会启用该按钮，但是当我 select 另一行的另一个价格时，该按钮仍处于启用状态，我需要禁用该选项中没有的同级按钮检查行。

为什么我的方法（兄弟姐妹）不起作用？

有我的代码...

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"> ,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">,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">,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"> ,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">,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">,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"> ,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">,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">,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"> ,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">,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">,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"> ,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">,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">,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>

Answer 1

试试这个：

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"> ,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">,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">,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"> ,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">,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">,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"> ,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">,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">,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"> ,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">,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">,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"> ,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">,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">,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>

选中其他行中的选项时禁用兄弟按钮

Disable siblings button when an option in other row are checked

javascript

jquery

html

siblings