javascript - Asp.net/Javascript 在选中复选框时删除输入字段的值

Question

现在我有一个 JavaScript 可以禁用我的输入字段。这就是执行此操作的脚本。

    $(document).ready(function() {
    $('#check').click(function(){
        if($(this).prop('checked') === true){
            $('#startTime').prop("disabled","disabled");
            $('#endTime').prop("disabled","disabled");
            $('#breakTime').prop("disabled","disabled");
            $('#workedHours').prop("disabled","disabled");
            $('#addMoreProjects').attr("disabled", "disabled");
            $('#projectName').attr("disabled", "disabled");
            $('#description_1').attr("disabled", "disabled");
            $('#hours_1').attr("disabled", "disabled");
        }
        else {
            $('#startTime').removeAttr('disabled');
            $('#endTime').removeAttr('disabled');
            $('#breakTime').removeAttr('disabled');
            $('#workedHours').removeAttr('disabled');
            $('#addMoreProjects').removeAttr('disabled');
            $('#projectName').removeAttr('disabled');
            $('#description_1').removeAttr('disabled');
            $('#hours_1').removeAttr('disabled');
        }
    });
});

但默认情况下，我的输入字段中有值，当我禁用输入字段时，这些值仍然存在。我想做的是，当我检查文本框时，它将禁用输入字段，并删除框中的值。当我取消选中它时，我希望将该值添加回来。

这是我的观点:

<div class="portlet-body form">
    <div class="form-group">
        <label class="col-md-5">Ingen tid att rapportera</label>
        @Html.CheckBoxFor(model => model.NoTimeToReport, new { @id = "check" })
    </div>
    @if (Model.ReportId.HasValue)
    {
        <div class="form-group">
            <label class="col-md-4 control-label">Redigera datum:</label>
            <div class="col-md-5">
                @Html.TextBox("date", Model.Date.ToShortDateString(), new {@class = "form-control", @readonly = "true"})
            </div>
        </div>
    }
    <div class="form-group">
        <label class="col-md-4 control-label">Start tid:</label>
        <div class="col-md-5">
            @Html.TextBox("startTime", Model.Times.StartTime, new {@class = "form-control timepicker timepicker-24"})
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-4 control-label">Slut tid:</label>
        <div class="col-md-5">
            @Html.TextBox("endTime", Model.Times.EndTime, new {@class = "form-control timepicker timepicker-24"})
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-4 control-label">Rast Längd:</label>
        <div class="col-md-5">
            @Html.TextBox("breakTime", Model.Times.BreakTime, new {@class = "form-control timepicker timepicker-24"})
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-4 control-label">Tid jobbad:</label>
        <div class="col-md-5">
            @Html.TextBox("workedHours", Model.Times.WorkedHours, new {@class = "form-control timepicker timepicker-24"})
        </div>
    </div>
</div>

Answer 1

试试这个:-

var startTime = $('#startTime');
var endTime = $('#endTime')
var breakTime = $('#breakTime');
var workedHours = $('#workedHours');
var addMoreProjects = $('#addMoreProjects');
var projectName = $('#projectName');
var description_1 = $('#description_1');
var hours_1 = $('#hours_1');

if ($(this).prop('checked') === true) {
    startTime.attr('disabled', 'disabled').attr('data-value', startTime.val()).val('');
                endTime.attr('disabled', 'disabled').attr('data-value', endTime.val()).val('');
                breakTime.attr('disabled', 'disabled').attr('data-value', breakTime.val()).val('');
                workedHours.attr('disabled', 'disabled').attr('data-value', workedHours.val()).val('');
                addMoreProjects.attr('disabled', 'disabled').attr('data-value', addMoreProjects.val()).val('');
                projectName.attr('disabled', 'disabled').attr('data-value', projectName.val()).val('');
                hours_1.attr('disabled', 'disabled').attr('data-value', hours_1.val()).val('');
                description_1.attr('disabled', 'disabled').attr('data-value', description_1.val()).val('');
}
else {   
  startTime.removeAttr('disabled').val(startTime.attr('data-value'));
  endTime.removeAttr('disabled').val(endTime.attr('data-value'));
  breakTime.removeAttr('disabled').val(breakTime.attr('data-value'));
  workedHours.removeAttr('disabled').val(workedHours.attr('data-value'));
 addMoreProjects.removeAttr('disabled').val(addMoreProjects.attr('data-value'));
 projectName.removeAttr('disabled').val(projectName.attr('data-value'));
 hours_1.removeAttr('disabled').val(hours_1.attr('data-value'));
 description_1.removeAttr('disabled').val(description_1.attr('data-value'));
}