CODEWITHSUNDEEP
javascriptlaravel-4
cnbwd
cnbwd

Reputation: 379

how to enable textbox ,when uncheck a checkbox using javascript

I have 5 teachers names and corresponding checkboxes(5) I am using checkall function to check all check boxes.

now I want ,when I uncheck a checkbox now enable a textbox at right side. how to create a textbox from unchecked function using javascript? my code is :

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'));
});

what is the javascript code to enable textbox?

Upvotes: 0

Views: 1537

Answers (3)

Sachin I
Sachin I

Reputation: 1508

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

Upvotes: 0

Yogesh Kumar
Yogesh Kumar

Reputation: 89

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>

Upvotes: 1

Sachin I
Sachin I

Reputation: 1508

Format your html code as I mentioned. You can do change as per your need

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

Upvotes: 0

Related Questions