-1

In my csshtml file, I defined a dialog window, in which a checkbox and a select are shown.

<div id="my_dialog_template" style="display: none;">
    <div class="member_selection" id="dlg_member_selection" data-title="Member Selection">
        <div class="block_row">
            <label>&nbsp;</label>
            <label class="default_only">
                <input id="default_only" type="checkbox" onclick="actionDefaultOnlyCheckedChanged();" />
                Default Member Only
            </label>
        </div>
        <div class="block_row">
            <label>Selected Member</label>
            <select class="selected_member" id="selected_member"></select>
        </div>
    </div>
</div>

@Html.HiddenFor(model => model.IsDefaultOnly, new { @id = "default_only" })
@Html.HiddenFor(model => model.SelectedMember, new { @id = "selected_member" })

What should I do in my js file in order to disable the "selected_member" select when the "default_only" checkbox is checked?

function actionDefaultOnlyCheckedChanged() {
    var isDefaultOnly = $("#default_only").val();

    // What should I do here???

}

SOLUTION:

I found a solution that does not use jquery.

var dlg = $("#dialog[template='member_selection']");
var defaultOnly = dlg.find('#default_only');
var selectedMember = dlg.find(".selected_member");

if (defaultOnly.is(":checked")) {
    defaultOnly.val("True");
    selectedMember.prop("disabled", true);
} else {
    defaultOnly.val("False");
    selectedMember.removeAttr("disabled");
}
user4134476
  • 385
  • 4
  • 22
  • Possible duplicate of [How to disable/enable select field using jQuery?](http://stackoverflow.com/questions/10570070/how-to-disable-enable-select-field-using-jquery) – James Thorpe Jul 01 '16 at 10:36

2 Answers2

0

What about document.getElementById("selected_member").hide();
Edit:
You can do it in onclick event instead of javascript
If you want to show it when unclicked you can use toggle() intead of hide().
(But you should hide with default then)

Gaetan
  • 325
  • 1
  • 15
0

You can try this:

$(function() {
    $('#default_only').on('change',function(){
     var isChecked = ($('#default_only:checked').val() == "on")? true : false;
     $('#selected_member').prop('disabled', isChecked);
  });

});

Here for a live demo: https://jsfiddle.net/vqdwkdzf/

Nordine
  • 824
  • 7
  • 25
  • Thank you for your reply. The demo worked, but my app didn't. This might be related to the fact that the controls are shown in a dialog in my app. Even though I put a break point in the function in the Visual Studio, it was never hit when the checkbox state was switched. – user4134476 Jul 01 '16 at 11:11
  • You're welcolme. That's strange, how do you usually execute js script in your app? – Nordine Jul 01 '16 at 11:19