如何禁用jQuery中文本框更改的非常下一個textarea？

Question

我的代碼中有多個Textbox和Textarea。

我在所有的文本框中都保留了kid類。

我期望的是當用戶輸入任何值時，VERY NEXT TEXTAREA應該被禁用。以下是結構

<div> 
<div> 
    <input type="text" class="kid" value="" name="kid" id="kid" /> 
</div> 
<div> 
    <div></div> 
    <div> 
     <textarea cols="30" rows="2" name="comment" id="comment"> </textarea> 
    </div> 
</div> 
</div> 

的JQuery這是不工作的代碼是：

var a = { 
init: function() { 
    $(".kid").on("change keyup paste", function() { 
     if ($(this).val() != "") { 
      $(this).next().attr("disabled", true); 
     } else { 
      $(this).next().attr("disabled", false); 
     } 
    }); 
} 
}; 
$(document).ready(a.init()); 

小提琴：https://jsfiddle.net/0f6vp938/

Answer 1

使用prop()而不是attr()：

var a = { 
    init: function() { 
     $(".kid").on("change keyup paste", function() { 
      if ($(this).val() != "") { 
       $("#comment").prop("disabled", true); 
      } else { 
       $("#comment").prop("disabled", false); 
      } 
     }); 
    } 
}; 
$(document).ready(a.init()); 

小提琴：https://jsfiddle.net/0f6vp938/5/

Answer 2

也許這樣的事情？

var a = { 
    init: function() { 
     $(".kid").on("change keyup paste", function() { 
      var $inp = $(this); 
      var v = $inp.val().trim(); 

      if (v != "") { 
       $inp.parent('div').parent('div').find('textarea').prop('disabled', 'disabled'); 
      } else { 
       $inp.parent('div').parent('div').find('textarea').prop('disabled', false); 
      } 

     }); 
    } 
    }; 
    $(document).ready(a.init()); 

Answer 3

var a = { 
 
    init: function() { 
 
     $(".kid").on("change keyup input", function() { 
 
      if ($(this).val() != "") { 
 
       $(this).parent().next().find('textarea').prop("disabled", true); 
 
      } else { 
 
       $(this).parent().next().find('textarea').prop("disabled", false); 
 
      } 
 
     }); 
 
    } 
 
}; 
 
$(document).ready(a.init());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div> 
 
    <div> 
 
     <input type="text" class="kid" value="" name="kid" id="kid" /> 
 
    </div> 
 
    <div> 
 
     <div></div> 
 
     <div> 
 
      <textarea cols="30" rows="2" name="comment" id="comment"></textarea> 
 
     </div> 
 
    </div> 
 
</div>

Answer 4

在您提供的小提琴，文本區域是不是真的旁邊的INPUT標記。

讓他們在一起，你是通過。

<div> 
 
    <div> 
 
     <input type="text" class="kid" value="" name="kid" id="kid" /> 
 
     <textarea cols="30" rows="2" name="comment" id="comment"></textarea> 
 
    </div> 
 
</div>

這裏是更新fiddle。

如果你不想讓他們這樣在一起，那麼你應該用你想禁用

HTML textarea的ID或CLASS：

<div> 
 
    <div> 
 
     <input type="text" class="kid" value="" name="kid" id="kid" /> 
 
    </div> 
 
    <div> 
 
     <div></div> 
 
     <div> 
 
      <textarea cols="30" rows="2" name="comment" id="comment"></textarea> 
 
     </div> 
 
    </div> 
 
</div>

jQuery：

var a = { 
 
    init: function() { 
 
     $(".kid").on("change keyup paste", function() { 
 
\t \t \t if ($(this).val() != "") { 
 
       $('#comment').attr("disabled", true); 
 
      } else { 
 
       $('#comment').attr("disabled", false); 
 
      } 
 
     }); 
 
    } 
 
}; 
 
$(document).ready(a.init());

如此fiddle所示。