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代码。您可以根据需要进行更改

＆＃13;

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

＆＃13;

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

＆＃13;

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>

如何在使用javascript取消选中复选框时启用文本框

3 个答案: