当复选框处于活动状态时,jQuery禁用其他行中的输入

时间:2017-12-31 13:10:50

标签: javascript jquery html

我想在选中复选框时启用/禁用输入。我的网站中有很多部分具有相同的结构,所以我知道我需要使用

this

构造。我试图做这样的事情,但它不起作用。有人可以帮帮我吗?

$('.component-other').on('click', function(){
    var isChecked = $(this).is(':checked');
    if (isChecked) {
        $(this).closest('.row').find('.component-other-value').prop("disabled", false);
    } else {
        $(this).closest('.row').find('.component-other-value').prop("disabled", true);
    }
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <div class="container">
  <div class="row">
    <div class="col-sm-12">
      <label for="sause-oth">Other</label>
      <input type="checkbox" name="sause" id="sause-oth" class="enable component-other">
    </div>
  </div>
  <div class="row input-row">
    <div class="col-sm-12">
      <input type="text" name="sause-other" id="sause-other" class="component-other-value" disabled="disabled" placeholder="Type text here">
    </div>
  </div>
</div>
</section>
<section>
  <div class="container">
  <div class="row">
    <div class="col-sm-12">
      <label for="sause-oth">Other</label>
      <input type="checkbox" name="sause" id="sause-oth-1" class="enable component-other">
    </div>
  </div>
  <div class="row input-row">
    <div class="col-sm-12">
      <input type="text" name="sause-other" id="sause-other-1" class="component-other-value" disabled="disabled" placeholder="Type text here">
    </div>
  </div>
</div>
</section>

1 个答案:

答案 0 :(得分:1)

最近的require(ggplot) require(ggpubr) before <-c(200.1, 190.9, 192.7, 213, 241.4, 196.9, 172.2, 185.5, 205.2, 193.7) after <-c(392.9, 393.2, 345.1, 393, 434, 427.9, 422, 383.9, 392.3, 352.2) d <- data.frame(before = before, after = after) ggpaired(d, cond1 = "before", cond2 = "after", add="jitter") data("ToothGrowth") df <- ToothGrowth ggboxplot(df, x = "dose", y = "len", width = 0.8, add="jitter") 是不够的。你必须在DOM上再加一层。

.row
$('.component-other').on('click', function(){
    $(this).closest('.container')
           .find('.component-other-value')
           .prop("disabled", !this.checked);
});