當使用JavaScript取消選中復選框時，如何啟用文本框

Question

我有5個老師姓名和相應的復選框（5）我正在使用checkall函數來選中所有復選框。

現在我想要，當我取消選中一個復選框時，在右側啟用一個文本框。 如何使用JavaScript從未經檢查的函數創建文本框？ 我的代碼是：

HTML + PHP：

<input type="checkbox" class="check form-control" id="checkFull">
<div class="form-group{{ ($errors->has('check')) ? 'has error' : '' }}">
    <label for="check" class="col-sm-4 control-label">{{$teacher->tname}}:</label>
    <div class="col-sm-4">
        <input type="hidden" id="{{$teacher->user_id}}" name="{{$teacher->user_id}}" value="0">
        <input id="{{$teacher->user_id}}" name="{{$teacher->user_id}}" type="checkbox" value="1" class="check form-control">
    </div>
    <div class="col-sm-4">
        <input type="text" class="textBox">
    </div>
</div>

JAVASCRIPT：

$("#checkFull").click(function() {
    $(".check").prop('checked', $(this).prop('checked'));
});

啟用文本框的JavaScript代碼是什么？

Answer 1

 function changeTextBoxFormCheckBox($elm){ var $textBox= $elm.closest(".form-group").find("input[type='text']"); if($elm.is(":checked")){ $textBox.attr("disabled",true); }else{ $textBox.attr("disabled",false); } } $(".checkbox").each(function(){ changeTextBoxFormCheckBox($(this)); }) $("#checkFull").click(function () { var checkAllProp= $(this).prop('checked'); $(".checkbox").each(function(){ var $this=$(this); $this.prop('checked', checkAllProp); changeTextBoxFormCheckBox($(this)); }) }); $(".checkbox").click(function () { changeTextBoxFormCheckBox($(this)); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="checkbox" class="check form-control" id="checkFull"> <div class="form-group {{ ($errors->has('check')) ? 'has error' : '' }}"> <label for="check" class="col-sm-4 control-label">tname:</label> <div class="col-sm-4"> <input type="hidden" id="{{$teacher->user_id}}" name="{{$teacher->user_id}}" value="0"> <input id="{{$teacher->user_id}}" name="{{$teacher->user_id}}" type="checkbox" value="1" class="check form-control checkbox"> </div> <div class="col-sm-4"> <input type="text" class="textBox"> </div> </div> 

Answer 2

如我所述，格式化您的html代碼。 您可以根據需要進行更改

 $(document).on('change', '[type=checkbox]', function() { if ($(this).is(":checked")) { $("#textBox1").attr("disabled", "disabled"); } else { $("#textBox1").removeAttr("disabled"); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-group"> <div class="col-sm-4 teacherContent"> <input type="hidden" id="teacherId1" name="teacherName1" value="0"> <input type="hidden" id="teacherId2" name="teacherName2" value="1"> <input id="teacherCheck_1" class="teacherCheck" name="teacherCheckName1" type="checkbox" value="1" class="check form-control"> <input id="teacherCheck_2" class="teacherCheck" name="teacherCheckName2" type="checkbox" value="1" class="check form-control"> </div> <div class="col-sm-4"> <input type="text" id="textBox1"> </div> </div> 

Answer 3

 $(document).on('change', '[type=checkbox]', function() { var val = $(this).data('value'); if ($(this).is(":checked")) { $("#textBox"+val).attr("disabled", "disabled"); } else { $("#textBox"+val).removeAttr("disabled"); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-group"> <div class="col-sm-4 teacherContent"> <input type="hidden" id="teacherId1" name="teacherName1" value="0"> <input type="hidden" id="teacherId2" name="teacherName2" value="1"> <input id="teacherCheck_1" data-value="1" name="teacherCheckName1" type="checkbox" class="check form-control"> <input type="text" id="textBox1"> <input id="teacherCheck_2" data-value="2" class="teacherCheck" name="teacherCheckName2" type="checkbox" class="check form-control"> <input type="text" id="textBox2"> </div> </div>