html文本中的输入类型复选框不起作用

时间:2016-04-04 10:30:09

标签: sweetalert

我为sweetalert定义了以下对话框。一切正常,但复选框没有出现。还有什么需要改变吗? 我搜索得足够多,但没有找到任何有效的解决方案。

Sweetalert对话框:

swal({   title: "Are you sure?",   text:" <form><input type='checkbox' name='vehicle' value='Bike'>I have a bike<br></form> Workload will be validated by you for cbs merge! <div class='text-danger'>" +wl_name+ "</div>" ,   
                                     showCancelButton: true, type: "info",   
                                     confirmButtonColor: "#DD6B55",   confirmButtonText: "Yes, validate it!",   cancelButtonText: "No, cancel pleaase!",   
                                     closeOnConfirm: false,   closeOnCancel: false, html:true , showLoaderOnConfirm: true},)

所有其他HTML标签工作正常..只有这个复选框在sweetalert弹出模型上不可见。

如果您需要任何进一步的信息,请与我们联系。

2 个答案:

答案 0 :(得分:4)

SweetAlert2中使用Swal.fire({ title: 'Do you have a bike?', input: 'checkbox', inputPlaceholder: 'I have a bike' }).then(function(result) { if (result.value) { Swal.fire({type: 'success', text: 'You have a bike!'}); } else if (result.value === 0) { Swal.fire({type: 'error', text: "You don't have a bike :("}); } else { console.log(`modal was dismissed by ${result.dismiss}`) } })模态类型的方法很简单:

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
  $scope.$watch('country_import.alpha_2', function() {
        $scope.country_import.alpha_2 = $scope.country_import.alpha_2.toUpperCase();
  });

答案 1 :(得分:3)

SweetAlert不支持自定义表单输入,但SweetAlert2执行:)

JSFIDDLE

$('document').ready(function() {
  $(document).on('click', '.test', function() {
    swal({   
      title: "Are you sure?",
      html: '<form><input type="checkbox">I have a bike<br></form> Workload will be validated by you for cbs merge! <div class="text-danger">test</div>',
      showCancelButton: true,
      type: "input",
      confirmButtonColor: "#DD6B55",
      confirmButtonText: "Yes, validate it!",
      cancelButtonText: "No, cancel pleaase!",
      closeOnConfirm: true,
      closeOnCancel: true,
      showLoaderOnConfirm: true,
    });
  });
});