javascriptjquerycheckboxfile-ioicheck

iCheck Enable/Disable Input-File(bootstrap) Button when i check a checkbox

Hello im using iCheck(http://icheck.fronteed.com/) The problem is, when i click the checkbox, input-file button works but appears to be "disabled" but it still in gray color, not in green.

I'm using two events, ifChecked/ifUnchecked.

I tried attr, removeclass, addclass before, using instead of .prop(); 

<input id="Archivo" name="Archivo" type="file" accept=".pdf,.doc" disabled />

 $("#Archivo").fileinput({
    language: "es",
    browseClass: "btn btn-primary",
    showCaption: true,
    showRemove: false,
    showUpload: false,
    browseLabel: "&nbsp;Buscar",
    allowedFileExtensions: ["pdf", "doc"],
    elErrorContainer: "#divErrorImagen",
    maxFileSize: 122880
}); 


$('input').on('ifChecked', function (event) {
    console.log("Checked OK")
   $('#Archivo').prop("disabled", false);


});
$('input').on('ifUnchecked', function (event) {
    console.log("Unchecked OK")
   $('#Archivo').prop("disabled", true);

});
Solution

  • Try using fileinput plugin disable and enable methods

    $(document).ready(function() {
  $("#Archivo").fileinput({
    language: "es",
    browseClass: "btn btn-primary",
    showCaption: true,
    showRemove: false,
    showUpload: false,
    browseLabel: "&nbsp;Buscar",
    allowedFileExtensions: ["pdf", "doc"],
    elErrorContainer: "#divErrorImagen",
    maxFileSize: 122880
  });

  $('#checkbox').iCheck({
    checkboxClass: 'icheckbox_minimal',
    radioClass: 'iradio_minimal',
    increaseArea: '20%'
  });

  $('input').on('ifChecked', function(event) {
    console.log("Checked OK")
    $('#Archivo').fileinput('disable');
  });

  $('input').on('ifUnchecked', function(event) {
    console.log("Unchecked OK")
    $('#Archivo').fileinput('enable');
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/all.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.5.3/css/fileinput.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.5.3/js/fileinput.js"></script>

<input id="Archivo" name="Archivo" type="file" accept=".pdf,.doc" disabled />

<input type="checkbox" id="checkbox">