更改事件上的jQuery在弹出窗口中不起作用

Question

我正在使用简单事件，但无法在弹出窗口中进行更改

我什至尝试在模型内部提供脚本标签，但即使没有控制台选中的元素，它仍然无法正常工作。 请让我知道我在做错什么，我不认为有问题。 我也尝试过onchange标签

 $(function() { // Working checked $('body').on('change', '[data-type=Working]', function() { var E = $(this).prop('checked') == true ? true : false; $('body').on('change','[data-type=Working]',function(){ var E = $(this).prop('checked'); if(E){ $('[data-type=EndDateMonth]').hide(); }else{ $('[data-type=EndDateMonth]').show(); } }); $('[data-type=Working]:checked').change(); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form method="post"> <div class="uk-modal" id="Experiences"> <div class="uk-modal-dialog"> <div class="uk-modal-header"> <h3 class="uk-modal-title">Add Experiences</h3> </div> <div data-type="Fields" class="uk-grid uk-grid-width-large-1-2 uk-grid-width-xlarge-1-4" data-uk-grid-margin> <div class="uk-width-medium-1-2"> <div class="parsley-row"> <label for="Company">Company Name</label> <input class="md-input" required name="Company" value="" type="text" /> </div> </div> <div class="uk-width-medium-1-2"> <div class="parsley-row"> <label for="Designation">Designation</label> <input class="md-input" required name="Designation" value="" type="text" /> </div> </div> <div class="uk-width-medium-1-1"> <div class="parsley-row"> <label for="Config[CategoryID]">Category</label> <select class="md-input" data-type="Category" required name="Config[CategoryID]"> <option value="0">Select...</option> <option value="1">Cat 1</option> <option value="2">Sub 2</option> </select> </div> </div> <div class="uk-width-medium-1-2"> <div class="parsley-row"> </div> </div> <div class="uk-width-medium-1-2"> <div class="parsley-row"> <label for="Salary">Current Salary</label> <input class="md-input" data-type="Salary" required name="Salary" value="" type="text" /> </div> </div> <div class="uk-width-medium-1-2"> <div class="parsley-row"> <label for="Config[CountryID]">Location</label> <select class="md-input" data-type="Country" required name="Config[CountryID]"> <option value="0">Select...</option> <option value="1">Pakistan</option> <option value="2">Africa</option> </select> </div> </div> <div class="uk-width-medium-1-2"> <div class="parsley-row"> <label for="Config[CityID]"></label> <select class="md-input" data-type="City" required name="Config[CityID]"> <option value="0">Select City</option> </select> </div> </div> <div class="uk-width-medium-1-2"> <div class="parsley-row"> <label for="Config[TimeStart]">Start Date</label> <input class="md-input" data-type="StartDateMonth" required name="Config[TimeStart]" value="" type="text" /> </div> </div> <div class="uk-width-medium-1-2"> <div class="parsley-row"> <label for="Config[TimeEnd]">End Date</label> <input class="md-input" data-type="EndDateMonth" name="Config[TimeEnd]" value="" type="text" /> </div> </div> <div class='uk-width-medium-1-1 uk-row-first'> <div class='parsley-row'> <label>Currently Working or Not</label> <div class='md-input-wrapper'> <span class="icheck-inline"> <input data-md-icheck data-type="Working" id="1" name="Currently" value="1" type="checkbox"/> <label for="Currently Working" class="inline-label">Currently Working</label></span> </div> </div> </div> <div class="uk-width-medium-1-1"> <div class="parsley-row"> <label for="Config[Description]">Description</label> <textarea class="md-input" name="Config[Description]"></textarea> </div> </div> </div> <div data-type="Result"></div> <div class="uk-modal-footer uk-text-right"><button class="md-btn md-btn-success md-btn-wave-light waves-effect waves-button waves-light" name="Submit">Submit</button><button type="button" data-dismiss="modal" class="md-btn md-btn-flat uk-modal-close" name="Close">Close</button></div> </div> </div> </form> 

我也在页脚区域jquery库中使用脚本标签。

Answer 1

首先请注意.prop('checked')返回一个布尔值，因此三元表达式是多余的。

其次，布尔值没有val()方法； 您似乎将它与jQuery对象混淆了。 您可以直接在if条件中直接使用E变量。 您还可以将该布尔值提供给toggle()以消除对单独的show()和hide()调用的需要。

最后请注意， E不是一个好的变量名。 他们应该描述自己持有的价值。 话虽如此，请尝试以下操作：

 $(function() { // Working checked $('body').on('change', '[data-type="Working"]', function() { var isChecked = $(this).prop('checked'); $('[data-type="EndDateMonth"]').toggle(!isChecked); }); $('[data-type="Working"]:checked').change(); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form method="post"> <div class="uk-modal" id="Experiences"> <div class="uk-modal-dialog"> <div class="uk-modal-header"> <h3 class="uk-modal-title">Add Experiences</h3> </div> <div data-type="Fields" class="uk-grid uk-grid-width-large-1-2 uk-grid-width-xlarge-1-4" data-uk-grid-margin> <div class="uk-width-medium-1-2"> <div class="parsley-row"> <label for="Company">Company Name</label> <input class="md-input" required name="Company" value="" type="text" /> </div> </div> <div class="uk-width-medium-1-2"> <div class="parsley-row"> <label for="Designation">Designation</label> <input class="md-input" required name="Designation" value="" type="text" /> </div> </div> <div class="uk-width-medium-1-1"> <div class="parsley-row"> <label for="Config[CategoryID]">Category</label> <select class="md-input" data-type="Category" required name="Config[CategoryID]"> <option value="0">Select...</option> <option value="1">Cat 1</option> <option value="2">Sub 2</option> </select> </div> </div> <div class="uk-width-medium-1-2"> <div class="parsley-row"> </div> </div> <div class="uk-width-medium-1-2"> <div class="parsley-row"> <label for="Salary">Current Salary</label> <input class="md-input" data-type="Salary" required name="Salary" value="" type="text" /> </div> </div> <div class="uk-width-medium-1-2"> <div class="parsley-row"> <label for="Config[CountryID]">Location</label> <select class="md-input" data-type="Country" required name="Config[CountryID]"> <option value="0">Select...</option> <option value="1">Pakistan</option> <option value="2">Africa</option> </select> </div> </div> <div class="uk-width-medium-1-2"> <div class="parsley-row"> <label for="Config[CityID]"></label> <select class="md-input" data-type="City" required name="Config[CityID]"> <option value="0">Select City</option> </select> </div> </div> <div class="uk-width-medium-1-2"> <div class="parsley-row"> <label for="Config[TimeStart]">Start Date</label> <input class="md-input" data-type="StartDateMonth" required name="Config[TimeStart]" value="" type="text" /> </div> </div> <div class="uk-width-medium-1-2"> <div class="parsley-row"> <label for="Config[TimeEnd]">End Date</label> <input class="md-input" data-type="EndDateMonth" name="Config[TimeEnd]" value="" type="text" /> </div> </div> <div class='uk-width-medium-1-1 uk-row-first'> <div class='parsley-row'> <label>Currently Working or Not</label> <div class='md-input-wrapper'> <span class="icheck-inline"> <input data-md-icheck data-type="Working" id="1" name="Currently" value="1" type="checkbox"/> <label for="Currently Working" class="inline-label">Currently Working</label></span> </div> </div> </div> <div class="uk-width-medium-1-1"> <div class="parsley-row"> <label for="Config[Description]">Description</label> <textarea class="md-input" name="Config[Description]"></textarea> </div> </div> </div> <div data-type="Result"></div> <div class="uk-modal-footer uk-text-right"><button class="md-btn md-btn-success md-btn-wave-light waves-effect waves-button waves-light" name="Submit">Submit</button><button type="button" data-dismiss="modal" class="md-btn md-btn-flat uk-modal-close" name="Close">Close</button></div> </div> </div> </form>