选中其他行中的选项时，禁用同级按钮

时间：2017-08-25 16:34:32

标签： javascript jquery html siblings

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

当我检查行中的某个选项时，我的脚本会启用该按钮，但是当我为另一行选择另一个价格按钮仍然启用时，我需要禁用选项已检查行中没有的兄弟按钮。

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

有我的代码......

＆＃13;
＆＃13; 
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);
    }
  });
});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：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>

相关问题
最新问题