Rectangle 27 1

var a=10; // from database
var b=20; // from database

var e=0;

$("#text1").val(a); // read and set value
$("#text2").val(b); // read and set value

function getValues(){
    a = parseInt($("#text1").val(), 10);
    b = parseInt($("#text2").val(), 10);
    var c = parseInt($("#text5").val(), 10);
    var d = parseInt($("#text6").val(), 10);
    doSomeCheck = $('#check').is(':checked') ? e=100 : e=0;

    $('#text4').val(e);
    $('#text3').val(a+b);
    $("#text7").val(a+b+c+d+e);
}
getValues();


$("#check").change(function() { 
    getValues();
});  

$("#text1, #text2, #text4, #text5, #text6").keyup(function() {
    getValues();
    if($(this).val() === '') $('#text7').val('...');
});

@harry no problem! P.S. the '10' in parseInt are the defined radix. Radix are from 2-32 and represent the numeral system to use.

javascript - textbox values based on checkbox checked/unchecked - Stac...

javascript jquery jsp checkbox textbox
Rectangle 27 1

You can check this jsFiddle: http://jsfiddle.net/Af6LP/1/ Modify it according to your needs.

$(document).ready(function() {
  $("#check").change(function() {
      if ($(this).is(":checked")) $("#text4").val("100");
      else $("#text4").val("0");
      calculate();
  });

  $("#text1, #text2, #text5, #text6").keyup(function() {
      calculate();
  });
});

function calculate() {
  var a = $("#text1").val();
  var b = $("#text2").val();
  var c = $("#text5").val();
  var d = $("#text6").val();
  var total = parseInt(a) + parseInt(b) + parseInt(c) + parseInt(d);
  if ($("#check").is(":checked")) total += parseInt($("#text4").val());
  $("#text7").val(total);
}
<body>
    <input type="checkbox" id="check"/><br/>
    <input type="text" id="text1" value="10"/><br/>
    <input type="text" id="text2" value="20"/><br/>
    // how can i autofill "POINTS" in this textbox after checking the checkbox?
    <input type="text" id="text3"/><br/>
    //how can i autofill "100" in this textbox after checking the checkbox?
    <input type="text" id="text4" value="0"/><br/>
    <input type="text" id="text5" value="0"/><br/>
    <input type="text" id="text6" value="0"/><br/>
    // shows total of all values of above textboxes except text3<br/>
    <input type="text" id="text7" value="30"/>
</body>

thanks Amar for your response, but POINTS should be written in text3 after checked but it is not happening, another thing is when 100 is filled in text4 then if i will edit this 100 by 200 then total remains same how? total should get changed accordingly, i think slight modification is required in your fiddle, can you please edit your fiddle

thanks Amar well just one more doubt, how can i remove "POINTS" when i am unchecking checkbox like text3's value 100 is being removed

In $("#check").change( function i'm resetting the text3. Inside else $("#text4").val("0"); , if you don't want it remove this.

ya but this one is not working: else $("#text3").val("0");

javascript - textbox values based on checkbox checked/unchecked - Stac...

javascript jquery jsp checkbox textbox
Rectangle 27 18

Though you have proposed a JavaScript solution for your problem (displaying a textbox when a checkbox is checked), this problem could be solved just by css. With this approach, your form works for users who have disabled JavaScript.

Assuming that you have the following HTML:

<label for="show_textbox">Show Textbox</label>
<input id="show_textbox" type="checkbox" />
<input type="text" />

You can use the following CSS to achieve the desired functionality:

#show_textbox:not(:checked) + input[type=text] {display:none;}

For other scenarios, you may think of appropriate CSS selectors.

javascript - How to check whether a checkbox is checked in jQuery? - S...

javascript jquery html dom checkbox
Rectangle 27 18

Though you have proposed a JavaScript solution for your problem (displaying a textbox when a checkbox is checked), this problem could be solved just by css. With this approach, your form works for users who have disabled JavaScript.

Assuming that you have the following HTML:

<label for="show_textbox">Show Textbox</label>
<input id="show_textbox" type="checkbox" />
<input type="text" />

You can use the following CSS to achieve the desired functionality:

#show_textbox:not(:checked) + input[type=text] {display:none;}

For other scenarios, you may think of appropriate CSS selectors.

javascript - How to check whether a checkbox is checked in jQuery? - S...

javascript jquery html dom checkbox
Rectangle 27 18

Though you have proposed a JavaScript solution for your problem (displaying a textbox when a checkbox is checked), this problem could be solved just by css. With this approach, your form works for users who have disabled JavaScript.

Assuming that you have the following HTML:

<label for="show_textbox">Show Textbox</label>
<input id="show_textbox" type="checkbox" />
<input type="text" />

You can use the following CSS to achieve the desired functionality:

#show_textbox:not(:checked) + input[type=text] {display:none;}

For other scenarios, you may think of appropriate CSS selectors.

javascript - How to check whether a checkbox is checked in jQuery? - S...

javascript jquery html dom checkbox
Rectangle 27 18

Though you have proposed a JavaScript solution for your problem (displaying a textbox when a checkbox is checked), this problem could be solved just by css. With this approach, your form works for users who have disabled JavaScript.

Assuming that you have the following HTML:

<label for="show_textbox">Show Textbox</label>
<input id="show_textbox" type="checkbox" />
<input type="text" />

You can use the following CSS to achieve the desired functionality:

#show_textbox:not(:checked) + input[type=text] {display:none;}

For other scenarios, you may think of appropriate CSS selectors.

javascript - How to check whether a checkbox is checked in jQuery? - S...

javascript jquery html dom checkbox
Rectangle 27 2

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <title>Enable/disable input based on checkbox</title>
        <script type="text/javascript">
        // setup a bit of code to run after the document has loaded. (note that its set on window)
        window.addEventListener('load', function(){
            potential_checkboxes = document.getElementsByTagName('input');
            for(i = 0; i < potential_checkboxes.length; i ++) {
                element = potential_checkboxes[i];
                // see if we have a checkbox

                if (element.getAttribute('type') == 'checkbox') {
                    // initial setup
                    textbox = document.getElementById(element.getAttribute('rel'));
                    textbox.disabled = ! element.checked;

                    // add event handler to checkbox
                    element.addEventListener('change', function() {
                        // inside here, this refers to the checkbox that just got changed
                        textbox = document.getElementById(this.getAttribute('rel'));
                        // set disabled property of textbox to not checked property of this checkbox
                        textbox.disabled = ! this.checked;
                    }, false);
                }               
            }
        }, false);
        </script>
    </head>
    <body>
        <h1>Enable/disable input based on checkbox.</h1>

        <form>
            <label for="textbox_1">
                Textbox 1: 
                <input id="textbox_1" type="text" value="some value" />
            </label>
            <br />
            <input id=="checkbox_1" type="checkbox" rel="textbox_1" />
            <label for="checkbox_1">Enable textbox 1?</label>
            <hr />
        <form>
    </body>
</html>

note that i'm using the rel attribute on the checkbox to indicate what textbox i want to manipulate.

Also note that addEventListener doesn't work in my favorite browser. Moreover, a decrementing while loop is faster than this for loop.

I tried this but I am not using the same doc type, so I am getting an error using the rel attribute :(

I wanted to add that the bit of code you posted has give me a lot to think about, as I am a JavaScript noobie. @Chief17 latest answer was much less complex though, and it got me going. Thanks for your help!

@Marcel, i always mixup addEventHandler and addEventListener, only tested in safari. I was going for readable as opposed to bloody fast here, decrementing while loop isn't half as readable. I concur on the browser front though ;)

php - How to gray out HTML form inputs? - Stack Overflow

php javascript html forms input
Rectangle 27 2

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <title>Enable/disable input based on checkbox</title>
        <script type="text/javascript">
        // setup a bit of code to run after the document has loaded. (note that its set on window)
        window.addEventListener('load', function(){
            potential_checkboxes = document.getElementsByTagName('input');
            for(i = 0; i < potential_checkboxes.length; i ++) {
                element = potential_checkboxes[i];
                // see if we have a checkbox

                if (element.getAttribute('type') == 'checkbox') {
                    // initial setup
                    textbox = document.getElementById(element.getAttribute('rel'));
                    textbox.disabled = ! element.checked;

                    // add event handler to checkbox
                    element.addEventListener('change', function() {
                        // inside here, this refers to the checkbox that just got changed
                        textbox = document.getElementById(this.getAttribute('rel'));
                        // set disabled property of textbox to not checked property of this checkbox
                        textbox.disabled = ! this.checked;
                    }, false);
                }               
            }
        }, false);
        </script>
    </head>
    <body>
        <h1>Enable/disable input based on checkbox.</h1>

        <form>
            <label for="textbox_1">
                Textbox 1: 
                <input id="textbox_1" type="text" value="some value" />
            </label>
            <br />
            <input id=="checkbox_1" type="checkbox" rel="textbox_1" />
            <label for="checkbox_1">Enable textbox 1?</label>
            <hr />
        <form>
    </body>
</html>

note that i'm using the rel attribute on the checkbox to indicate what textbox i want to manipulate.

Also note that addEventListener doesn't work in my favorite browser. Moreover, a decrementing while loop is faster than this for loop.

I tried this but I am not using the same doc type, so I am getting an error using the rel attribute :(

I wanted to add that the bit of code you posted has give me a lot to think about, as I am a JavaScript noobie. @Chief17 latest answer was much less complex though, and it got me going. Thanks for your help!

@Marcel, i always mixup addEventHandler and addEventListener, only tested in safari. I was going for readable as opposed to bloody fast here, decrementing while loop isn't half as readable. I concur on the browser front though ;)

php - How to gray out HTML form inputs? - Stack Overflow

php javascript html forms input
Rectangle 27 7

next()
if ($(this).is(':checked'))
    $(this).next('div.max_tickets').show();
else
    $(this).next('div.max_tickets').hide();

From the documentation (linked above), the next() method selects:

Here we're selecting the next div.max_tickets element. However in your case just using next() with no parameters would suffice.

javascript - jquery - show textbox when checkbox checked - Stack Overf...

javascript jquery html
Rectangle 27 2

Assuming markup will stay in same order can use next()

jQuery(document).ready(function($) {

    $('input.maxtickets_enable_cb').change(function(){
                $(this).next()[ this.checked ? 'show' : 'hide']();  
    }).change();
});

javascript - jquery - show textbox when checkbox checked - Stack Overf...

javascript jquery html
Rectangle 27 1

Maybe try selecting the next element only?

if ($(this).is(':checked')) $('div.max_tickets').show();
if ($(this).is(':checked')) $(this).next('div.max_tickets').show();

javascript - jquery - show textbox when checkbox checked - Stack Overf...

javascript jquery html
Rectangle 27 1

if ($(this).is(':checked')) $('div.max_tickets').show();
if ($(this).is(':checked')) $(this).next('div.max_tickets').show();

javascript - jquery - show textbox when checkbox checked - Stack Overf...

javascript jquery html
Rectangle 27 1

Put a div across your checkbox and text box

<form action="">
<div id="opwp_woo_tickets">
<div>
    <input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[tickets][0][enable]">
    <div class="max_tickets">
        <input type="text" name="opwp_wootickets[tickets][0][maxtickets]">
    </div>
</div>
<div>
    <input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[tickets][1][enable]">
    <div class="max_tickets">
        <input type="text" name="opwp_wootickets[tickets][1][maxtickets]">
    </div>
</div>
<div>
    <input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[tickets][2][enable]">
    <div class="max_tickets">
        <input type="text" name="opwp_wootickets[tickets][2][maxtickets]">
    </div>
</div>
</div>
</form>

and replace your jquery code with this one below,

jQuery(document).ready(function($) {
   $('input.maxtickets_enable_cb').change(function(){
       if ($(this).is(':checked')) $(this).parent().children('div.max_tickets').show();
       else $(this).parent().children('div.max_tickets').hide();
   }).change();
});

I have tested it and it works.

javascript - jquery - show textbox when checkbox checked - Stack Overf...

javascript jquery html
Rectangle 27 1

While you may need a JavaScript solution for other reasons, it's worth noting that this can be achieved with pure CSS:

input + div.max_tickets {
    display: none;
}

input:checked + div.max_tickets {
    display: block;
}

Or, with jQuery, the simplest approach seems to be:

// binds the change event-handler to all inputs of type="checkbox"
$('input[type="checkbox"]').change(function(){
    /* finds the next element with the class 'max_tickets',
       shows the div if the checkbox is checked,
       hides it if the checkbox is not checked:
    */
    $(this).next('.max_tickets').toggle(this.checked);
// triggers the change-event on page-load, to show/hide as appropriate:
}).change();
:checked
change()
next()
toggle()

javascript - jquery - show textbox when checkbox checked - Stack Overf...

javascript jquery html
Rectangle 27 4

$('.Blocked').change( function() {
    var isChecked = this.checked;

    if(isChecked) {
        $(this).parents("tr:eq(0)").find(".textbox").prop("disabled",true); 
    } else {
        $(this).parents("tr:eq(0)").find(".textbox").prop("disabled",false);
    }

});

Compacted, it would look a little like:

$('.Blocked').change( function() {
    $(this).parents("tr:eq(0)").find(".textbox").prop("disabled", this.checked); 
});

Interesting. You set the attr true when 'isChecked' is true and false when 'isChecked' is false. The rest of those two lines is identical. (I do think your answer explains what is going on well.)

Also, you should use prop instead of attr

nice.. in addition to disabling the textbox, would it be possible to set the text of the textbox to "0"? Thanks!

javascript - Disable a textbox if checkbox is checked - Stack Overflow

javascript jquery html checkbox textbox
Rectangle 27 4

$('.Blocked').change( function() {
    var isChecked = this.checked;

    if(isChecked) {
        $(this).parents("tr:eq(0)").find(".textbox").prop("disabled",true); 
    } else {
        $(this).parents("tr:eq(0)").find(".textbox").prop("disabled",false);
    }

});

Compacted, it would look a little like:

$('.Blocked').change( function() {
    $(this).parents("tr:eq(0)").find(".textbox").prop("disabled", this.checked); 
});

Interesting. You set the attr true when 'isChecked' is true and false when 'isChecked' is false. The rest of those two lines is identical. (I do think your answer explains what is going on well.)

Also, you should use prop instead of attr

nice.. in addition to disabling the textbox, would it be possible to set the text of the textbox to "0"? Thanks!

javascript - Disable a textbox if checkbox is checked - Stack Overflow

javascript jquery html checkbox textbox
Rectangle 27 3

Here the example -

@using (Html.BeginForm())
{
    @Html.CheckBoxFor(model => model.MyBooleanValue)
    <br />
    @Html.TextBoxFor(model => model.MyTextValue)
    <br />
    <input type="submit" value="Submit" />
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
    $(function () {
        $("#MyBooleanValue").click(function () {
            if ($(this).is(':checked')) {
                $("#MyTextValue").show();
            }
            else {
                $("#MyTextValue").hide();
            }
        });
    });
</script>
public class HomeController : Controller
{
    public ActionResult Index()
    {
        var model = new MyViewModel
        {
            MyBooleanValue = true
        };
        return View(model);
    }

    [HttpPost]
    public ActionResult Index(MyViewModel model)
    {
        if (model.MyBooleanValue)
        {
            string text = model.MyTextValue;
        }

        return View(model);
    }
}
public class MyViewModel
{
    public bool MyBooleanValue { get; set; }
    public string MyTextValue { get; set; }
}

that's true, msdn tutorial are also good place to start but which two books do you recommend , i mean the books names which helped you to learn ?

I would suggest Pro ASP.NET MVC 5 by Adam Freeman for step-by-step learning, and Professional ASP.NET MVC 5 for reference.

javascript - MVC 4 display/hide a textbox based on a checkbox check - ...

javascript asp.net-mvc
Rectangle 27 3

Here the example -

@using (Html.BeginForm())
{
    @Html.CheckBoxFor(model => model.MyBooleanValue)
    <br />
    @Html.TextBoxFor(model => model.MyTextValue)
    <br />
    <input type="submit" value="Submit" />
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
    $(function () {
        $("#MyBooleanValue").click(function () {
            if ($(this).is(':checked')) {
                $("#MyTextValue").show();
            }
            else {
                $("#MyTextValue").hide();
            }
        });
    });
</script>
public class HomeController : Controller
{
    public ActionResult Index()
    {
        var model = new MyViewModel
        {
            MyBooleanValue = true
        };
        return View(model);
    }

    [HttpPost]
    public ActionResult Index(MyViewModel model)
    {
        if (model.MyBooleanValue)
        {
            string text = model.MyTextValue;
        }

        return View(model);
    }
}
public class MyViewModel
{
    public bool MyBooleanValue { get; set; }
    public string MyTextValue { get; set; }
}

that's true, msdn tutorial are also good place to start but which two books do you recommend , i mean the books names which helped you to learn ?

I would suggest Pro ASP.NET MVC 5 by Adam Freeman for step-by-step learning, and Professional ASP.NET MVC 5 for reference.

javascript - MVC 4 display/hide a textbox based on a checkbox check - ...

javascript asp.net-mvc
Rectangle 27 3

Here the example -

@using (Html.BeginForm())
{
    @Html.CheckBoxFor(model => model.MyBooleanValue)
    <br />
    @Html.TextBoxFor(model => model.MyTextValue)
    <br />
    <input type="submit" value="Submit" />
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
    $(function () {
        $("#MyBooleanValue").click(function () {
            if ($(this).is(':checked')) {
                $("#MyTextValue").show();
            }
            else {
                $("#MyTextValue").hide();
            }
        });
    });
</script>
public class HomeController : Controller
{
    public ActionResult Index()
    {
        var model = new MyViewModel
        {
            MyBooleanValue = true
        };
        return View(model);
    }

    [HttpPost]
    public ActionResult Index(MyViewModel model)
    {
        if (model.MyBooleanValue)
        {
            string text = model.MyTextValue;
        }

        return View(model);
    }
}
public class MyViewModel
{
    public bool MyBooleanValue { get; set; }
    public string MyTextValue { get; set; }
}

that's true, msdn tutorial are also good place to start but which two books do you recommend , i mean the books names which helped you to learn ?

I would suggest Pro ASP.NET MVC 5 by Adam Freeman for step-by-step learning, and Professional ASP.NET MVC 5 for reference.

javascript - MVC 4 display/hide a textbox based on a checkbox check - ...

javascript asp.net-mvc
Rectangle 27 2

Sticking with the inline event handler:

function myFunction(chk) {
    $(chk).closest('tr').find('.textbox').prop('disabled', chk.checked);
}
$('.Blocked').change(function() {
    $(this).closest('tr').find('.textbox').prop('disabled', this.checked);
});

javascript - Disable a textbox if checkbox is checked - Stack Overflow

javascript jquery html checkbox textbox