Question

我尝试启用复选框，然后通过代码单击它。但它不起作用。如果我单击enable and click checkbox按钮，则复选框切换。但是，如果我先按disable checkbox，它只会启用，而不是按enable and click checkbox按钮点击。

＆＃13;

function disableCheckbox() {
	$("#restprovider").prop("disabled", true);
}
function enableCheckboxAndClick() {
	$("#restprovider").prop("disabled", false);
  $("#restprovider").click();
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="restprovider" type="checkbox">
<button onclick="disableCheckbox()">
disable checkbox
</button>
<button onclick="enableCheckboxAndClick()">
enable and click checkbox
</button>

＆＃13;

Answer 1

代码（internal class MainWindowViewModel : INotifyPropertyChanged, IDisposable { public event PropertyChangedEventHandler PropertyChanged; private TEAMSEntities ctx = new TEAMSEntities(); public MainWindowViewModel() { FillSales(); } public void AddASale() { Tbl_Sales newsale = new Tbl_Sales(); newsale.SALEID = "2018..."; newsale.SALE = "...."; newsale.SALEDESC = "...."; newsale.START = Convert.ToDateTime("12/04/2018"); newsale.SESSIONS = 2; newsale.DAYS = 2; newsale.LOTS = 100; newsale.FIRSTLOT = 1; newsale.LASTLOT = 100; Sales.Add(newsale); SaveChanges(); } #region Sale private void FillSales() { var q = (from a in ctx.Tbl_Sales select a).ToList(); this.Sales = q; } private List<Tbl_Sales> _sales; public List<Tbl_Sales> Sales { get { return _sales; } set { _sales = value; NotifyPropertyChanged(); } } private Tbl_Sales _selectedSale; public Tbl_Sales SelectedSale { get { return _selectedSale; } set { _selectedSale = value; NotifyPropertyChanged(); } } #endregion Sale . . . . public void SaveChanges() { ctx.SaveChanges(); } private void NotifyPropertyChanged([CallerMemberName] String propertyName = "") { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } public void Dispose() { ((IDisposable)ctx).Dispose(); } }）适用于Chrome，但不适用于Firefox v.58。

此问题似乎与Firefox在重绘之后才识别$("#restprovider").click();已启用的事实有关。

解决此问题的一个方法是将checkbox调用封装在click()中，如下面的示例所示，但还有其他几个选项：

注意，此处使用的4ms超时值可能无法跨浏览器工作，因此可能需要稍微调整其值。

Stack snippet

＆＃13;

setTimeout()

＆＃13;

function disableCheckbox() {
  $("#restprovider").prop("disabled", true);
}

function enableCheckboxAndClick() {
  $("#restprovider").prop("disabled", false);
  setTimeout(function() {
    $("#restprovider").click();
  }, 4)
}

＆＃13;

在问题编辑后更新

如果您只对此感兴趣，例如在切换<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="restprovider" type="checkbox"> <button onclick="disableCheckbox()"> disable checkbox </button> <button onclick="enableCheckboxAndClick()"> enable and click checkbox </button>的已检查状态时，只需执行以下操作：

＆＃13;

input

＆＃13;

function disableCheckbox() {
  $("#restprovider").prop("disabled", true);
}

function enableCheckboxAndClick() {
  $("#restprovider").prop("disabled", false);
  $("#restprovider").prop("checked", function() { this.checked = !this.checked });
}

＆＃13;

Answer 2

而不是

  $("#restprovider").click();

使用

 $("#restprovider").prop( "checked", true );

现在它不会切换。

＆＃13;

function disableCheckbox() {
	$("#restprovider").prop("disabled", true);
}
function enableCheckboxAndClick() {
	$("#restprovider").prop("disabled", false);
  $("#restprovider").prop( "checked", true );
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="restprovider" type="checkbox">
<button onclick="disableCheckbox()">
disable checkbox
</button>
<button onclick="enableCheckboxAndClick()">
enable and click checkbox
</button>

＆＃13;

Answer 3

一种方法是使用已检查属性：

var $restprovider = $('#restprovider');

function disableCheckbox() {
    $restprovider.prop("disabled", true);
}

function enableCheckboxAndClick() {  
    $restprovider.prop('disabled', false);
    $restprovider[0].checked 
        ? ($restprovider.click(), $restprovider.prop('checked', false)) 
        : $restprovider.prop('checked', true);
}

这是一个example。

Answer 4

你的代码很好用。你可以用以下代码重新编写代码：

$("#restprovider").prop("disabled", false).click();

Answer 5

如果您想要一个看起来已被禁用的复选框，您可以这样做：

$('#restprovider').css({pointerEvents:"none", opacity:0.5});

启用禁用复选框，然后使用jquery单击它

5 个答案: