使用jQuery根据复选框值禁用Div内容

Question

hi am developing mvc project using c#

currently am working on employee system model

I have designed view below like this

 @Html.CheckBoxFor("value", new {data_divToDisable="SSLCSection",@class="SelectSection" })
                  <div id="SSLCSection" class="DisableDiv">
<table>
//Conntent goes here
</table>
</div>


@Html.CheckBoxFor("value", new {data_divToDisable="PUCSection",@class="SelectSection" })
                  <div id="PUCSection" class="DisableDiv">
<table>
//Conntent goes here

</table>
</div>

@Html.CheckBoxFor("value", new {data_divToDisable="GraduationSection",@class="SelectSection" })
                  <div id="GraduationSection" class="DisableDiv">
<table>
//Conntent goes here

</table>
</div>
@Html.CheckBoxFor("value", new {data_divToDisable="PostGraduationSection",@class="SelectSection" })
                  <div id="PostGraduationSection" class="DisableDiv">
<table>
//Conntent goes here

</table>
</div>

here I need to disable sections when loading view based on checkbox value

like if checkbox is checked no need to disable that section otherwise it would be disable

I have written jquery like this

 $(document).ready(function () {
     $(".SelectSection").attr('checked', false,function(){
            var id = $(this).find(".DisableDiv");
            alert(id);
           $(this).find(".DisableDiv").find('input, textarea, select,table').each(function () {
                $(this).prop('disabled', true);
            });
        });

this is not doing anything for us

please help and your help would be greately appreciated

Please Note I have using data-Attribute to simplify the jquery and while each time loading the page it has to disable the sections based on checkbox value (hint:it has to disable if checkbox value is false )

Answer 1

You could try the follow, excuse the pseudo code.

HTML

<input class="SelectSection" type="checkbox" >hello1</input>

<div id="SSLCSection" class="DisableDiv" >
     <input type="input">Test</input>
    <textarea>Test1</textarea>
</div>


    <br>
<input class="SelectSection" type="checkbox">hello2</input>
<div id="PUCSection" class="DisableDiv" >
     <input type="input">Test2</input>
    <textarea>Test12</textarea>
</div>


<br>
<input class="SelectSection" type="checkbox" checked>hello3</input>
<div id="PostGraduationSection" class="DisableDiv" >
     <input type="input">Test3</input>
    <textarea>Test3</textarea>
</div>

jQuery

$(document).ready(function () {
$(".SelectSection[type='checkbox']").each(function (i, o) {
    if ($(o).is(":checked")) {

        $(o).next('div').find('input,textarea').each(function (i, o) {
            $(o).prop('disabled', true);
        });

    }
});
})

The above assumes that your next element after the relevant checkbox is the div in question which holds the elements that need to be disabled.