0

I am trying to add code so when a user checks a box a certain field is enabled and another disabled and vice versa if the check box is not checked. I have looked on here and found this code:

<head>
<script type="text/javascript">

    $('#UseForecast').click(function() {
        var $this = $(this);

        if ($this.is(':checked')) {
            $('#MinimumOnHandQuantity').removeAttr("disabled");
            $('#ForecastMultiplier').attr("disabled", "disabled")
        } else {
            $('#MinimumOnHandQuantity').attr("disabled", "disabled")
            $('#ForecastMultiplier').removeAttr("disabled");
        }
    });
</script>

</head>

@Html.EditorFor(model => model.UseForecast, new { htmlAttributes = new { @class = "form-control" } })

@Html.EditorFor(model => model.MinimumOnHandQuantity, new { htmlAttributes = new { @class = "form-control" } })

@Html.EditorFor(model => model.ForecastMultiplier, new { htmlAttributes = new { @class = "form-control" } })

What am I missing?

Which I modified to include the ids of the fields on my page. UseForecast is the id of the checkbox, MinimumOnHandQuantity is the first textbox, and ForecastMultiplier is the id for the second textbox. When I try to step through the code, it stops when the page initially loads but it will not run whenever I click on the check box.

djblois
  • 963
  • 1
  • 17
  • 52
  • 1
    You need a document load handler OR move the script below the html elements. Also double check the id attributes to make sure the helpers are rendering the id as you expect. – Jasen Sep 12 '17 at 19:29
  • Are you sure UseForecast is a `CheckBox`? – AT-2017 Sep 12 '17 at 19:30
  • @Jasen, where below? at the bottom of the page? – djblois Sep 12 '17 at 19:38
  • @Jasen I put it at the bottom of the page and it still does nothing but it now crashes when the page initially loads – djblois Sep 12 '17 at 19:41
  • @AT-2017, I just double checked in an inspect element and it says type="checkbox" – djblois Sep 12 '17 at 19:43
  • Review [this question](https://stackoverflow.com/questions/14328449/when-do-you-put-javascript-in-body-when-in-head-and-when-use-doc-load) and the related links. – Jasen Sep 12 '17 at 19:54

1 Answers1

0

Putting ready method handling block before click event works as expected, no need to move script tag outside the head element:

<head>
<script>
    // this ready method should be added before handling all jQuery DOM event handlers
    $(document).ready(function () {

        $('#UseForecast').click(function() {
            var $this = $(this).is(':checked');

            if ($this) {
                $('#MinimumOnHandQuantity').removeAttr("disabled");
                $('#ForecastMultiplier').attr("disabled", "disabled")
            } else {
                $('#MinimumOnHandQuantity').attr("disabled", "disabled")
                $('#ForecastMultiplier').removeAttr("disabled");
            }
        });
    });
</script>
</head>

Note: Remember to include jQuery script file inside head element either through script element (<script src="[path_to_jquery_script].js">) or use System.Web.Optimization script bundling.

Working example: .NET Fiddle Demo

Tetsuya Yamamoto
  • 24,297
  • 8
  • 39
  • 61
  • Tetsuya, that is awesome it works now. Just curious, it doesn't run on page load now though. I need it to run during page load and during on document ready. How do I do both? – djblois Sep 13 '17 at 14:06
  • Can you explain what you mean "run during page load" (disabling one of the textbox in default state or something else)? I think you can add jQuery `load` method to handle checkbox toggle during first load. – Tetsuya Yamamoto Sep 13 '17 at 15:31
  • Yes disabling one based on what is saved in the database upon page load - so the default will always be different. Currently I do that with a C# code but I feel that is redundant. – djblois Sep 13 '17 at 16:02