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'));
}

Answer 2

问题是你应该做一些额外的javascript逻辑。你可以将你的数据隐藏在某些data-value属性中。 Here你有一个单个元素的例子。

保留修改后文本逻辑的技巧是为每个文本框添加一个更改事件，如下所示：

$( "#someTextbox" ).change(function() {
  $("#someTextbox").attr('data-value', $(this).val());
});

为了在你的情况下使用它，尝试编辑类似于文本框的渲染（基本上我已经为你的文本框添加了data_value，请注意你需要用＆＃34; _＆＃34;来修改它，mvc将照顾正确的格式）：

 @Html.TextBox("startTime", Model.Times.StartTime, new {@class = "form-control timepicker timepicker-24", data_value = Model.Times.StartTime.ToString()})

Answer 3

当您在“startTime”文本框中存储值时，您可以做的只是使用hiddenfield并在其中存储相同的值，然后您可以更改您的代码，如下所示。

其他部分：

$('#startTime').val('');
$('#startTime').removeAttr('disabled');

如果部分：

$('#startTime').val($('#your date time hidden field').val());

让我知道它是否适合你。

Answer 4

javascript中有一个简单的例子：

function chk(ele) {
    var n1=document.getElementById('txtName');
    var n2=document.getElementById('txtName2');
    if(ele.checked) {
        n1.disabled=false;n2.disabled=false;
        n1.value=n1.getAttribute('data-value');
        n2.value=n2.getAttribute('data-value');
        n1.focus();
    } else {
        n1.setAttribute('data-value',n1.value);
        n2.setAttribute('data-value',n2.value);
        n1.value='';n2.value='';
        n1.disabled=true;n2.disabled=true;
    }
}

<input type="checkbox" onclick="chk(this);" checked />Check me
<br><br>
First name : <input type="text" id="txtName" value="" data-value="" />
<br><br>
Last name : <input type="text" id="txtName2" value="" data-value="" />

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

4 个答案: